我想要在垂直居中的一行中渲染链接和精灵图像：
HTML：
<a href="/videos/12" class="normal video_title">Why Eminem is the best</a>
<div class="sprite" id="pointer"></div>
by
<a href="/profiles/1" class="feed_image"><img alt="Justin meltzer" src="/system/photos/1/tiny/Justin Meltzer.jpeg?1305874692"></a>
<a href="/profiles/1" class="normal squeeze">Justin Meltzer</a>
我如何在一条线上获得所有这些元素？
我会做一个jsfiddle，但我没有公共网址上的精灵图片
答案 0 :(得分：0)
您需要将指针div设置为内联显示：
#pointer { display: inline;}
默认情况下，div标签是块级元素。这将迫使他们与其他项目内联。
答案 1 :(得分：0)
将div设置为显示内联块，以便一切都保持在一行。您是否希望链接与图像的中心对齐？
div.sprite { background: blue; height: 50px; width: 50px; display: inline-block; }
更新： 正如在注释中指出的那样，IE6 / 7中不支持内联块，除非它应用的元素是naturally inline。因此，更好的解决方案是将div改为span。
span.sprite { display: inline-block; }
答案 2 :(得分：0)
我会从一个改进开始。 DIV显示为块，所以如果您使用精灵，无论如何都要给它一个宽度为n的高度，在这种情况下去SPAN。
现在将div包裹起来并给它一个样式：text-align: center;。或者你也可以给这个外部DIV一个宽度。并做一个margin: auto;。
答案 3 :(得分：0)
最好使用<span>作为指针 - <div>用于对相关元素进行分组 - 但事实并非如此。它也会自动位于同一行，因为span是一个内联元素。