我试图垂直对齐图像和文本:
+-------------------------+ -- Viewport | Text text text | | +-----+ text text text | | |IMAGE| text text text | | +-----+ text text text | | text text text | +-------------------------+
如果没有包装文本,这样可以正常工作.如果Text比视口宽度宽,则它不再起作用.我认为这是由设置display:inline-block引起的:
<a href="#">
<img style="display: inline-block; vertical-align: middle; margin-right: 8px;" src="images/arrow_black.png" />
<span style="display: inline-block; vertical-align: middle;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum eirmod tempor invidunt ut labore et dolore
</span>
</a>
结果:
+---------------------------------------------------------------------+ -- Viewport | | | +-----+ | | …