垂直对齐图标
我有图标。问题是它们不像其他东西（文本、输入）那样垂直对齐到中间。我的 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}
我的精灵始终与底部对齐，而复选框和文本位于中间。
I have icons. Problem is they do not vertically align to the middle like everything else (text, input). My html structure is something like this:
<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}
my sprite is always aligned to the bottom, while the checkbox and text are in the middle.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是行不通的，span 是一个内联元素，所以一旦你删除文本，它就会崩溃；
height和width不会做任何事情。我不确定您到底想要实现什么，但在我看来，您需要将精灵作为您已有的元素之一的背景（例如
.i_contain_things），而不是将其放在一个单独的元素中。如果您确实需要将其放入单独的元素中，则需要确保它是块级元素（例如设置为
div或span>显示：块）。该元素需要放置在您想要的位置。This is not going to work, a span is an inline element so as soon as you remove the text, it will collapse;
heightandwidthwon´t do anything.I´m not sure what you want to achieve exactly, but it seems to me that you need to put your sprite as a background to one of the elements you already have (like
.i_contain_things), and not put it in a separate element.If you do need to put it in a separate element, you need to make sure it´s a block level element (for example a
divor aspanthat's set todisplay:block). That element needs to be positioned where you want it.您需要指定
background-position属性。像这样：其中第一个数字是 x 轴，第二个数字是 y 轴 您可以使用百分比、像素或关键字（right、top、center）来声明背景图像的位置。
http://www.w3schools.com/css/css_background.asp
You need to specify the
background-positionproperty. Like so:Where the first number is axis-x and the second number is axis-y You can use percentages, pixels, or keywords (right, top, center) to declare the position of the background image.
http://www.w3schools.com/css/css_background.asp