CSS圖標垂直對齊

我想用最少的CSS元素，以實現在CSS以下路線：CSS圖標垂直對齊

中東：

============================================================== 
= [icon]              = 
= [ ] Text            = 
= [ ]              = 
==============================================================

底：

============================================================== 
= [icon]              = 
= [ ]              = 
= [ ] Text            = 
==============================================================

右中：

============================================================== 
=              [ ] = 
= Text            [ ] = 
=              [ ] = 
==============================================================

Right Bott OM：

============================================================== 
=              [ ] = 
=              [ ] = 
= Text            [ ] = 
==============================================================

中是很容易的：

假設文本的line-height = 10px的，圖標高度= 30像素

<div class="container"> 
    Text 
</div> 

<div class="container right"> 
    Text 
</div> 

.container { 
    line-height: 30px; 
    background: url(...) no-repeat center left 
    padding-left: 38px; 
} 
.container.right { 
    line-height: 30px; 
    background: url(...) no-repeat center right 
    padding-right: 38px; 
}

的問題是：我該怎麼辦底部對齊？

來源

2012-08-01 Dmitriy Likhten

'background：url（...）no-repeat right right'？ – 2012-08-01 17:41:30

您可以從父元素垂直對齊元素的唯一方法是將其設置爲顯示爲display:table-cell;和vertical-align:的表格單元格。如果這是不可接受的，你必須從子元素和相對定位來完成。

http://jsfiddle.net/VdvmJ

來源

2012-08-01 20:14:10 RyanJMcGowan

會檢查出來，非常感謝。 – 2012-08-01 21:01:35

史詩般的傢伙，我愛你！要說清楚。將height設置爲圖像的大小，設置display：table-cell;並在同一個元素上設置vertical-align作爲你想要的方向。 – 2012-08-03 13:20:19

是的。如果你想在CSS中分開做每件事，你可以將它作爲一種開關來使用，所以你不必編碼每種可能的佈局組合。 – RyanJMcGowan 2012-08-03 17:22:37

我覺得這不是什麼大不了的事。首先將背景圖像位置設置在左上方，然後根據圖像高度增加線條高度。

Check this jsfiddle example

對於右對齊的部分，我設置text-align:right;也。

希望你正在努力做到這一點。

來源

2012-08-01 16:50:12 Libin

我無法使用該解決方案，原因是我不知道文本的高度是多少。在這個例子中我認爲它是10px，但是這種風格需要應用於許多元素，每個元素都有不同的字體大小。此外，它有點不對，http://jsfiddle.net/ySYTb/2/看到邊界。它推動實際的父母比預期的更大。 – 2012-08-01 18:09:35

CSS圖標垂直對齊

回答

相關問題