垂直对齐图标

我有图标。问题是它们不像其他所有东西（文本，输入）那样垂直对齐中间。我的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

垂直对齐图标

回答

相关问题