为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。
跨度{垂直对齐:中间;}<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>
当前回答
接受答案中使用的技术仅适用于单行文本(demo),而不适用于多行文本(demo),如这里所述。
如果有人需要将多行文本垂直居中放置到图像中,以下是几种方法(方法1和方法2受此CSS技巧文章启发)
方法#1:CSS表格(FIDDLE)(IE8+(犬))
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
方法#2:容器上的伪元素(FIDDLE)(IE8+)
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
方法3:Flexbox(FIDDLE)(犬用)
CSS(上面的fiddle包含供应商前缀):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
其他回答
使用行高度:30px作为跨度,以便文本与图像对齐:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
我同意,这可能令人困惑。尝试利用表格功能。我使用这个简单的CSS技巧将情态动词放在网页的中心。它具有大型浏览器支持:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
和CSS部分:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
请注意,您必须设置图像和表格容器的样式并调整其大小,以使其按您的需要工作。享受
因为您必须将行高度设置为div的高度,这样才能工作
将div更改为flex容器:
div { display: flex; }
方法1:
div { align-items: center; }
DEMO
方法2:
div * { margin: auto 0; }
DEMO
尝试在img上使用不同的宽度和高度值,在跨距上尝试不同的字体大小值,您将看到它们始终保持在容器的中间。
你可能想要这样:
<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