CODEWITHSUNDEEP
htmlcss
Cacoon
Cacoon

Reputation: 2538

HTML List wont center

http://jsfiddle.net/pfW2v/39/

<ul style="text-align: center;list-style-type: none;margin: 1;padding: 0;display:inline-block;">
<li style="list-style-position:inside;font: 200 18px/1.5 Helvetica, Verdana, sans-serif;border-bottom: 6px solid #00ff09;width: 80px;">
    <a href="a">TopDave25</a> 1000</li>
<li style="font: 200 15px/1.5 Helvetica, Verdana, sans-serif;border-bottom: 6px solid #00a806;width: 80px;">
    <a href="b">Masterchief36</a> 400</li>
<li style="font: 200 10px/1.5 Helvetica, Verdana, sans-serif;border-bottom: 6px solid #0d6b1d;width: 120px;">
    <a href="#">Your Username!</a>
</li>

Above is a link showing my list, i have to use inline HTML (Cant use a CSS stylesheet or <style> in the HTML but using text-align: center; does nothing, I have tried googling and it just doesnt seem to want to center

Upvotes: 1

Views: 151

Answers (4)

Harsha Biyani
Harsha Biyani

Reputation: 7268

In HTML:

<div id="maindiv">
<ul style="text-align: center;list-style-type: none;margin: 1;padding: 0;display:inline-block;">

<!-- ALL CODE INSIDE DIV -->

</ul>
</div>

In css:

#maindiv{
width:100%;
text-align:center;
}

Upvotes: 0

Pankaj Ladhar
Pankaj Ladhar

Reputation: 155

I have fixed in JSFiddle.

http://jsfiddle.net/Pankaj_Ladhar/pfW2v/44/

I have added style="display:block" for anchor make it come in next line. If you don't want remove this code form <a> tag.

I have also added width:250px to <ul> to make li should look center aligned. You can remove that as we all.

Upvotes: -1

Sukrit Gupta
Sukrit Gupta

Reputation: 448

Remove Individual Widths from the li's and add a width say around 100px to ul..

It should solve your prob.

Working Fiddle: jsfiddle.net/pfW2v/40/

Upvotes: 0

The Well
The Well

Reputation: 884

Place it inside a div:

div
{
    width: 100vw;
    text-align: center;
}

Upvotes: 5

Related Questions