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

这是fiddle

Answer 1

如果您不知道（或想要设置）列表的宽度，请将其更改为显示：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

Answer 2

我猜您正在寻找类似this

的内容

只需添加此css规则：

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

您必须为li元素指定宽度，并将其设置为margin: 0 auto的中心。并且只是让他们离开以获得图标和标签正确

Answer 3

我为你做了一个小提琴http://jsfiddle.net/wLu22cxr/3/

我所做的改变：

{{1}}

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>

注意项目如何在1行中对齐（它们从同一个原点开始）。它与其他解决方案不同。还有机会为.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;
}

css文本对齐列表中心

5 个答案: