css文本在列表中對齊中心

我想在中心對齊ul，但標籤應該從相同的位置開始。但我不能讓它對齊。css文本在列表中對齊中心

<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

來源

2015-10-13 MichaelAngelo

我做了一個搗鼓你http://jsfiddle.net/wLu22cxr/3/

改變我做：

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

來源

2015-10-13 18:47:37

我猜你正在尋找的東西像this

只需添加這個CSS規則：

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

您必須指定li元素的寬度，並將它們設置爲以margin: 0 auto爲中心。如果您不知道（或想要設置）列表的寬度，請將其更改爲顯示：inline-block，然後使用text-align來獲得圖標和標籤的權利

來源

2015-10-13 18:44:12 Chris

你的回答使得它很難有一個可變寬度雖然，堅持住。 –

我知道這不是最優雅的解決方案，但它是最簡單和最簡單的，並且在大多數情況下，您的li元素將具有相同的寬度 – Chris

我看到您來自哪裏，但您不希望在更改CSS時儘管添加一個新的（長）李元素！ –

它定位：

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

jsFiddle example

來源

2015-10-13 18:46:39 j08691

最簡單和最好的解決方案 – Chris

「...但標籤應該從同一點開始」 - 他們不會。 –

@F.Müller - 給圖標一個寬度是一個簡單的解決方案。 http://jsfiddle.net/j08691/4j94xont/ – j08691

您好這應該做的伎倆：

.feature-list { 
 
\t margin:0 auto; 
 
\t padding:0; 
 
\t list-style:none; 
 
\t 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"> 
 
\t \t \t \t \t \t \t \t \t <li><i class="fa fa-users"></i><label> A Label</label></li> 
 
\t \t \t \t \t \t \t \t \t <li><i class="fa fa-wifi"></i><label> A Label test</label></li> 
 
\t \t \t \t \t \t \t \t \t <li><i class="fa fa-heart"></i><label> A Labellongword</label></li> 
 
\t \t \t \t \t \t \t \t \t <li><i class="fa fa-cutlery"></i><label> A Labelsometext</label></li> 
 
\t \t \t \t \t \t \t \t \t <li><i class="fa fa-cogs"></i><label> A tex</label></li> 
 
\t \t \t \t \t \t \t \t \t <li><i class="fa fa-car"></i><label> A text</label></li> 
 
\t \t \t \t \t \t \t \t </ul> 
 
</div>

注意，該項目1號線（他們開始在同一個原點）如何對齊。它不像其他解決方案。還有機會爲.fa課程設置固定寬度。這也適用於更長的標籤 - 您有換行符的地方。

來源

2015-10-13 18:53:15

我希望這會幫助你。這裏是小提琴演示

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

來源

2015-10-13 18:53:38

css文本在列表中對齊中心

回答

相關問題