为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。
跨度{垂直对齐:中间;}<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 */
}
其他回答
在这些答案中还没有找到一个有余量的解决方案,所以这里是我对这个问题的解决方案。
只有当您知道图像的宽度时,此解决方案才有效。
HTML
<div>
<img src="https://placehold.it/80x80">
<span>This is my very long text what should align. This is my very long text what should align.</span>
</div>
CSS
div {
overflow:hidden;
}
img {
width:80px
margin-right:20px;
display:inline-block;
vertical-align:middle;
}
span {
width:100%;
margin-right:-100px;
padding-right:100px;
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
使用行高度:30px作为跨度,以便文本与图像对齐:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
您可以做的另一件事是将文本的行高度设置为<div>中图像的大小。然后将图像设置为垂直对齐:中间;
这是最简单的方法。
写下这些跨度财产
span{
display:inline-block;
vertical-align:middle;
}
使用显示:内联块;当您使用vertical-align属性时。这些是关联的财产
2022年,浏览器支持率达到96%,我很惊讶没有人建议使用网格布局。
在本JSFiddle中,3行是实现OP目标所需的全部内容(但提供了多条路线以供比较):
div {
display: grid;
grid-template-columns: min-content max-content;
align-items: center
}
一个额外的UI细节将包括可选的gap属性的使用,该属性允许调整父网格容器(div)中每个网格项之间的空间。
网格布局的优势
轻松垂直和水平对齐网格项网格项之间的空间调制任何大小的图像(使用最小内容)和文本长度(使用最大内容的一行或使用最小内容的换行(未在fiddle中显示))都可以工作-无需在CSS中硬编码图像尺寸(两种用法都在JSFiddle中演示)现代方法
网格布局的缺点
较旧的浏览器支持更具挑战性网格布局通常需要更有经验的开发人员来正确实现,而不是像块/内联块显示那样简单