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;
}
我做了一个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;
}
我想将 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;
}
我做了一个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;
}