CODEWITHSUNDEEP
htmlcss
Nalaka526
Nalaka526

Reputation: 11464

How to center li tags list

I'm displaying list of tags in a website. This is how it is displayed now

enter image description here

I've created a JSFiddle, Please check.

Now the tags are aligned left, I need to align tags to centre. Tried adding text-align: center; to .tags class but it does not center the tags.

This is my HTML & CSS code

HTML

<div class="tags">
    <ul>
        <li><a href="">tag 0000000</a></li>
        <li><a href="">tag 1111111111111</a></li>
        ...
    </ul>
</div>​

CSS

.tags
{
    display:table;
}

.tags li
{
    float:left;
    list-style-type: none;
    text-decoration: none;
    margin: 10px 0 0 0;
}

.tags ul a
{
    text-decoration: none;
    padding: 4px;
    border: 1px solid #F2F0F0;
    margin: 2px;
}

I need to display tags as many as fit in to a row, but the contents of the row must be aligned center.

Upvotes: 1

Views: 6492

Answers (3)

Simon West
Simon West

Reputation: 3788

http://jsfiddle.net/hxbB9/18/ another alternative solutiont that dosnt require setting a width on your .tags div

.tags
{

}

.tags li
{ 
    display:inline-block;
    list-style-type: none;
    text-decoration: none;
    margin: 10px 0 0 0;
}

.tags ul a
{
    text-decoration: none;
    padding: 4px;
    border: 1px solid #F2F0F0;
    margin: 2px;
}

.tags ul
{
    text-align:center;    
}

Upvotes: 2

velocityhead
velocityhead

Reputation: 172

I believe this is what you're looking for: 

.tags ul
{
    text-align: center;
    list-style-type: none;
}
.tags ul li {
    display: inline-block;
}
.tags ul a
{
    display: inline-block;
    text-decoration: none;
    padding: 4px;
    border: 1px solid #F2F0F0;
    margin: 2px;
}

Upvotes: 1

Amaerth
Amaerth

Reputation: 178

http://jsfiddle.net/hxbB9/6/

Is this what you're looking for?

Upvotes: 0

Related Questions