垂直對齊圖標

我有圖標。問題是它們不像其他所有東西（文本，輸入）那樣垂直對齊中間。我的HTML結構是這樣的：垂直對齊圖標

<div class="i_contain_things"> 
    <div class="i_float_left"><checkbox/></div>some text 
    <div class="i_float_right"> 
    <span class="sprite icn1">my sprite</span> 
    <span class="sprite icn2">my sprite</span> 
    </div> 
</div> 

.i_contain_things 
{ 
clear:both; 
margin-bottom:10px; 
vertical-align:middle; 
} 

.i_float_left 
{ 
padding:0 3px 0 3px; 
float:left; 
display:inline-block; 
} 

.i_float_right 
{ 
padding:0 3px 0 3px; 
float:right; 
display:inline-block; 
vertical-align:middle; 
} 

.sprite 
{ 
display:inline-block; 
background: url(../img/icn_sprite_1.png); 
width: 16px; 
height: 16px; 
vertical-align: middle; 
} 
.icn1{background-position:0,0} 
.icn2{background-position:0,16px}

我的精靈總是對準到了谷底，而複選框和文本是在中間。

來源

2011-01-07 aepheus

有任何實際的標記測試？基本上我只是建議在圖像中添加一些bot邊距，或者使用行高CSS垂直對齊技術。 http://www.brunildo.org/test/va_lineheight.html – Loktar 2011-01-07 17:03:53

您可以使用常規的html語法嗎？它會讓看起來更容易。你也可以包括一些CSS？ – JakeParis 2011-01-07 17:04:20

行高無效，我無法添加底部邊距，因爲高度是可變的。 – aepheus 2011-01-07 17:20:36

您需要指定background-position屬性。像這樣：

sprite { background: url(../img/icn_sprite_1.png) 50% 50% no-repeat;

其中第一個數字是軸-x和第二個數字是軸-γ可以使用百分比，像素或關鍵字（右，頂部，中部）申報的背景圖像的位置。

http://www.w3schools.com/css/css_background.asp

來源

2011-01-07 17:30:55 JakeParis

這是行不通的，一個跨度爲一個內聯元素，以便儘快刪除文本，它會崩潰; height和width不會做任何事情。

我不確定你想要達到什麼目的，但在我看來，你需要把你的精靈作爲你已經擁有的一個元素（如.i_contain_things）的背景，而不是把它放在一個獨立的元素。

如果你需要把它放在一個單獨的元素，你需要確保it's一個塊級元素（例如div或者被設置爲display:block一個span）。該元素需要定位在你想要的地方。

來源

2011-01-07 18:31:29 jeroen

垂直對齊圖標

回答

相關問題