Making
list align center

Question

I am applying dynamic classes "float-left", "float-right" and "float-center" to the Lists to position them properly where I want, but for centering as there is no float:center; I tried with margins, inline-block; text-align:center.. but nothing works.. please check this fiddle

 ul.tabs .center {
   margin:0 auto;
   text-align:center;
   overflow:hidden;
 }

 .float-center li{
   display:inline-block;
 }

http://jsfiddle.net/443E2/

Look here: http://stackoverflow.com/questions/1740587/float-a-div-to-center — Miro, Feb 09 '14 at 14:14

score 0 · Answer 1 · answered Feb 09 '14 at 14:14

0

Check this fork - http://jsfiddle.net/GzS7X/

I changed this to centre the content of the <li>:

.tab_content {
    padding: 20px;
    font-size: 1.2em;
    text-align:center;
}

answered Feb 09 '14 at 14:14

malta

858
1
9
17

its the same, the content is center but the LI themselves are left aligned.. I want the tab buttons to be aligned centered.. – user1718343 Feb 09 '14 at 14:18

score 0 · Accepted Answer · answered Feb 09 '14 at 14:22

Use the following code:

.float-center {
    text-align: center;
}
.tabs.float-center li {
    display: inline-block;
    float; none;
    margin-left: -4px;  /* Fix for white spaces between li while using inline-block */
}
.tabs.float-center li:last-child {
    border-right: 1px solid #999;
}

See the update jsfiddler

Making list align center

2 Answers2

Making
list align center