Как выровнять пункты меню в одну линию, будучи выровненным по центру?

Question

[Петр Сергеев]

Сейчас текст выровнен по центру, но нужно, чтобы внутри пункты списка находились по одной линии. Как это принято делать?

https://jsfiddle.net/x0crjsmz/

Comments

[Василий Варюхин]

Как это?

[Александр Суханов]

Если я правильно понял, то:

ul {
display: flex;}
li {
flex: 1;
text-align: center;
}

или

ul {
display: table;
width: 100%;
}
li {
display: table-cell;
text-align: center;
}

или

ul {
font-size:0;
}
li {
width: 20%;
font-size:20px;
display:inline-block;
text-align: center;
}

[Петр Сергеев]

Александр Суханов, извините, я наверное неправильно выразился, вот какой результат нужен.

Answer 1

[#FFFFFF]

.list{
    width: 400px;
    margin: 0 auto;
    font-size: 20px;
    display: flex;
    justify-content: center;
}

text-align убираем

Comments

[Петр Сергеев]

больше спасибо, это то, что нужно

Answer 2

[Антон Вебсайтовский]

Можно так, хотя выше уже много вариантов написали.
https://jsfiddle.net/h07s4w1t/

А если в одну линию по вертикали, чтобы все ровно в строку было.
https://jsfiddle.net/h07s4w1t/1/

Вот еще вариант, с выравниванием в одну линию все пункты и еще выравнивание текста от значка.
https://jsfiddle.net/h07s4w1t/2/

ul,li {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
a{
    text-decoration: none;
    color: inherit;
}

.list{
    width: 400px;
    margin: 0 auto;
    font-size: 20px;
    text-align: center;
}

Comments

[Петр Сергеев]

Спасибо. На самом деле чем больше вариантов тем даже лучше.

[Антон Вебсайтовский]

223606322, недавно такое делал в самом низу сайта, выравнивал тож всякие контакты, значки разной ширины, и текст не совсем ровно смотрелся, я вот и сделал такую фишку с width.

Answer 3

[Дмитрий Полушкин]

Например так:

ul,li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}
a{
    text-decoration: none;
    color: inherit;
}

.list{
    width: 400px;
    margin: 0 auto;
    font-size: 20px;
    text-align: center;
}

Comments

[Петр Сергеев]

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