將引導文字與文本垂直對齊？

<div style="display:inline-block"> 
usernad <span class="glyphicon glyphicon-user"></span> ape<br> 
dads <span class="glyphicon glyphicon-user"></span> stack<br> 
defdood <span class="glyphicon glyphicon-user"></span> rocks<br> 
eleminem <span class="glyphicon glyphicon-user"></span> boom<br> 
</div> 
<div style="display:inline-block"> 
[email protected] <span class="glyphicon glyphicon-envelope"></span> tester32<br> 
[email protected] <span class="glyphicon glyphicon-envelope"></span> fourteenppl<br> 
[email protected] <span class="glyphicon glyphicon-envelope"></span> eleven<br> 
[email protected] <span class="glyphicon glyphicon-envelope"></span> goo<br> 
</div>

我試圖創建兩列，每列都有這種格式的行：text glyphicon text，但我想在直線上垂直對齊圖形以提高可讀性。有沒有辦法用Bootstrap來做到這一點？將引導文字與文本垂直對齊？

來源

2016-06-14 Felix

你必須用span然後float它包裝文本，並在每4個項目清除它。你需要使用min-width

右對齊文字之前，我的意思是說。

然後使用text-align:right

div { 
 
    display: inline-block; 
 
    border: dotted 1px red; 
 
    vertical-align: middle; 
 
    padding: 5px 
 
} 
 
div span { 
 
    float: left 
 
} 
 
div span:nth-of-type(3n+1) { 
 
    clear: left; 
 
    text-align: right 
 
} 
 
div:first-of-type span:nth-of-type(3n+1) { 
 
    min-width: 70px; 
 
} 
 
div:last-of-type span:nth-of-type(3n+1) { 
 
    min-width: 120px 
 
} 
 
.glyphicon { 
 
    margin: 2px 5px 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div> 
 
    <span> usernad</span> <span class="glyphicon glyphicon-user"></span><span> ape </span> 
 
    <span>dads</span> <span class="glyphicon glyphicon-user"></span> <span>stack</span> 
 
    <span>defdood</span> <span class="glyphicon glyphicon-user"></span> <span>rocks</span> 
 
    <span>eleminem </span><span class="glyphicon glyphicon-user"></span><span> boom</span> 
 
</div> 
 
<div> 
 
    <span> [email protected]</span> <span class="glyphicon glyphicon-envelope"></span> <span>tester32</span> 
 
    <span>[email protected]</span> <span class="glyphicon glyphicon-envelope"></span><span>fourteenppl</span> 
 
    <span>[email protected]</span> <span class="glyphicon glyphicon-envelope"></span> <span>eleven</span> 
 
    <span>[email protected]</span> <span class="glyphicon glyphicon-envelope"></span> <span>goo</span> 
 
</div>

來源

2016-06-14 02:55:21 dippas

這就是我要找的，但我需要的左側用的左邊對齊象形文字也是。 – Felix

不明白你需要什麼，對不起。你需要左欄有更少的空白？那麼就減少最小寬度。我可以更新該答案 – dippas

正確對齊文本是我想說的。 – Felix

我不認爲這是可以與原生引導完成，但如果你讓你的圖標跨度inline-block的你可以再申請垂直對齊到它（我用頂部的樣品中）

div { 
    font-size:15px; 
    line-height:32px; 
} 
span.glyphicon 
{ 
    display:inline-block; 
    vertical-align:top; 
}

我已使這jsfiddle顯示對齊;我還增加了線條高度以便在視覺上進行說明。

來源

2016-06-14 02:54:49 agrath

沒有什麼OP是尋找 – dippas

將引導文字與文本垂直對齊？

回答

相關問題