为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。
跨度{垂直对齐:中间;}<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>中图像的大小。然后将图像设置为垂直对齐:中间;
这是最简单的方法。
其他回答
background:url(../images/red_bullet.jpg) left 3px no-repeat;
我通常用3px代替top。通过增加/减少该值,可以将图像更改为所需的高度。
在这些答案中还没有找到一个有余量的解决方案,所以这里是我对这个问题的解决方案。
只有当您知道图像的宽度时,此解决方案才有效。
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;
}
因为您必须将行高度设置为div的高度,这样才能工作
显示带对齐项目的柔性:居中;是垂直对齐项目的最佳方式
第二部分{显示:柔性;对齐项目:居中;}<div><img src=“https://via.placeholder.com/30“alt=”小img“/><span>它起作用</span></div>
基本上,你必须降到CSS3。
-moz-box-align: center;
-webkit-box-align: center;