CSS текст выравнивания по центру в списке

Question

Я хочу выровнять ul по центру, но метка должна начинаться с той же точки. Но я не могу привести его в соответствие.

<div class="box">
    <ul class="feature-list">
        <li><i class="fa fa-users"></i><label> A Label</label></li>
        <li><i class="fa fa-wifi"></i><label> A Label test</label></li>
        <li><i class="fa fa-heart"></i><label> A Labellongword</label></li>
        <li><i class="fa fa-cutlery"></i><label> A Labelsometext</label></li>
        <li><i class="fa fa-cogs"></i><label> A tex</label></li>
        <li><i class="fa fa-car"></i><label> A text</label></li>
    </ul>
</div>

Некоторые простые CSS

.feature-list {
    margin:0;
    padding:0;
    list-style:none;
    font-size: 14px;
    }
.box{
    text-align: center;
}

Вот скрипка

Answer 1

Я сделал для тебя скрипку http://jsfiddle.net/wLu22cxr/3/

Изменения, которые я сделал:

.feature-list {
    margin:0 auto;
    text-align: left;
    display:inline-block;
}
.box{
    text-align: center;
}

Answer 2

Если вы не знаете (или хотите установить) ширину списка, измените его на display:inline-block, затем используйте text-align для позиционирования:

.feature-list {
    padding:0;
    list-style:none;
    font-size: 14px;
    display:inline-block;
    text-align: left;
}
.box {
    text-align: center;
}

Пример jsFiddle

Answer 3

Я думаю, вы ищете что-то вроде этого

Просто добавьте это правило CSS:

.box li{
    width: 120px;
    margin: 0 auto;
    text-align: left;
}

Вы должны указать ширину li элементы и установить их по центру margin: 0 auto, И просто расположив их слева, чтобы получить значок и ярлык справа

Answer 4

Привет, это должно сработать:

.feature-list {
 margin:0 auto;
 padding:0;
 list-style:none;
 font-size: 14px;
    width: 200px;
    border: 1px solid grey;
}
.feature-list > li {
    position: relative;
    padding-left: 20px;
}
.fa {
    position: absolute;
    left: 0;
    top: 2px;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="box">
    <ul class="feature-list">
         <li><i class="fa fa-users"></i><label> A Label</label></li>
         <li><i class="fa fa-wifi"></i><label> A Label test</label></li>
         <li><i class="fa fa-heart"></i><label> A Labellongword</label></li>
         <li><i class="fa fa-cutlery"></i><label> A Labelsometext</label></li>
         <li><i class="fa fa-cogs"></i><label> A tex</label></li>
         <li><i class="fa fa-car"></i><label> A text</label></li>
        </ul>
</div>

Обратите внимание, как элементы выстраиваются в одну строку (они начинаются с одного источника). В отличие от других решений. Существует также возможность установить фиксированную ширину для .fa учебный класс. Это также будет работать для длинных надписей, где у вас есть разрывы строк.

Answer 5

Я надеюсь, что это поможет вам. Вот демо скрипки

https://jsfiddle.net/ve3ebaaz/2/

HTML
<div class="box">
    <ul class="feature-list">
        <li><i class="fa fa-users"></i><label> A Label</label></li>
        <li><i class="fa fa-wifi"></i><label> A Label test</label></li>
        <li><i class="fa fa-heart"></i><label> A Labellongword</label></li>
        <li><i class="fa fa-cutlery"></i><label> A Labelsometext</label></li>
        <li><i class="fa fa-cogs"></i><label> A tex</label></li>
        <li><i class="fa fa-car"></i><label> A text</label></li>
    </ul>
</div>


----------
css


.feature-list {
    margin:0 auto;
    padding:0;
    list-style:none;
    font-size: 14px;
    width:200px;
    }
.box{
    text-align: justify;
}