css 文本在列表中居中对齐

css text align center in list

我想将 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;
}

这是一个fiddle

我猜你正在寻找类似 this

的东西

只需添加此 css 规则:

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

您必须为 li 元素指定宽度,并将它们设置为以 margin: 0 auto 居中。只需将它们向左调整即可获得正确的图标和标签

如果你不知道(或想设置)列表的宽度,把它改成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 example

我做了一个fiddle给你http://jsfiddle.net/wLu22cxr/3/

我所做的更改:

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

你好,这应该可以解决问题:

.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 class 设置固定宽度。这也适用于较长的标签 - 有换行符的地方。

希望对您有所帮助。 这是fiddle演示

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;
}