Question

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

我的精灵始终与底部对齐，而复选框和文字位于中间。

Answer 1

这不起作用，span是一个内联元素，所以一旦删除文本，它就会崩溃; height和width不会做任何事情。

我不确定你想要达到什么目的，但在我看来，你需要把你的精灵作为你已经拥有的元素之一（如.i_contain_things）的背景，而不是把它它在一个单独的元素中。

如果确实需要将其放在单独的元素中，则需要确保它是块级元素（例如div或span设置为display:block ）。该元素需要定位在您想要的位置。

Answer 2

您需要指定background-position属性。像这样：

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

第一个数字是axis-x，第二个数字是axis-y你可以使用百分比，像素或关键字（右，顶部，中心）来声明背景图像的位置。

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

垂直对齐图标

2 个答案: