Дисплей табличной ячейки не центрирует содержимое

Question

У меня есть упорядоченный список (<ol>), который отображает горизонтальную панель кнопок.

Чтобы избежать элементов, отображаемых вертикально, я использую свойство, display: table-cell;. Но теперь все элементы отображаются влево.

jsfiddle является @http://jsfiddle.net/42xt001j/

Снимок -

Как я могу гарантировать, каждый из пункта меню занимает одну треть ширины ol?

Добавление дополнительной недвижимости width:33% перестраивает элементы по вертикали, что нежелательно.

Answer 1

Вы должны использовать display: table на контейнере <ol>

Demo

li { 
 
    display: table-cell; 
 
    margin: 0 15px 0 0; 
 
    border-right-style: dotted; 
 
    color: blue; 
 
    border-color: #000000; 
 
} 
 
ol { 
 
    float: left; 
 
    width: 27em; 
 
    border: 4px solid black; 
 
    margin: 5em auto; 
 
    list-style: none; 
 
    padding: 10px 0; 
 
    text-align: center; 
 
    display: table; 
 
} 
 
li:last-child { 
 
    border-right-width: 0; 
 
}

<ol> 
 
    <li>Save suite</li> 
 
    <li>Load suite</li> 
 
    <li>Run suite</li> 
 
</ol>

Answer 2

Вам нужно изменить в CSS, которые я упомянул следовать.

li { 
    display: table-cell; 
    margin: 0 15px 0 0; 
    border-right-style: dotted; 
    color: blue; 
    border-color: #000000; 
} 
ol{ 
    display:table; 
    width: 27em; 
    border: 4px solid black; 
    list-style: none; 
    Padding:10px; 
    text-align:center; 
} 
li:last-child { 
    border-right-width: 0; 
}