为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。
跨度{垂直对齐:中间;}<div><img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>
为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。
跨度{垂直对齐:中间;}<div><img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>
当前回答
你可能想要这样:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
正如其他人所建议的,尝试在图像上垂直对齐:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS并不烦人。你只是没有阅读文档;P
其他回答
对于记录,对齐“命令”不应该在SPAN上工作,因为它是一个内嵌标记,而不是块级标记。对齐、边距、填充等功能在内联标记上不起作用,因为内联的目的是不中断文本流。
CSS将HTML标记分为两组:内联和块级。搜索“css block vs inline”,会出现一篇很棒的文章。。。
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(理解CSS的核心原则是它不那么烦人的关键)
多线解决方案:
http://jsfiddle.net/zH58L/6/
<div style="display:table;width:30px;height:160px;">
<img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
<div style="display:table-cell;height:30px;vertical-align:middle">
Multiline text centered vertically
</div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->
适用于所有浏览器和ie9+
该代码适用于IE和FF:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
background:url(../images/red_bullet.jpg) left 3px no-repeat;
我通常用3px代替top。通过增加/减少该值,可以将图像更改为所需的高度。
显示带对齐项目的柔性:居中;是垂直对齐项目的最佳方式
第二部分{显示:柔性;对齐项目:居中;}<div><img src=“https://via.placeholder.com/30“alt=”小img“/><span>它起作用</span></div>