为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。
跨度{垂直对齐:中间;}<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>
当前回答
写下这些跨度财产
span{
display:inline-block;
vertical-align:middle;
}
使用显示:内联块;当您使用vertical-align属性时。这些是关联的财产
其他回答
写下这些跨度财产
span{
display:inline-block;
vertical-align:middle;
}
使用显示:内联块;当您使用vertical-align属性时。这些是关联的财产
background:url(../images/red_bullet.jpg) left 3px no-repeat;
我通常用3px代替top。通过增加/减少该值,可以将图像更改为所需的高度。
因为您必须将行高度设置为div的高度,这样才能工作
对于记录,对齐“命令”不应该在SPAN上工作,因为它是一个内嵌标记,而不是块级标记。对齐、边距、填充等功能在内联标记上不起作用,因为内联的目的是不中断文本流。
CSS将HTML标记分为两组:内联和块级。搜索“css block vs inline”,会出现一篇很棒的文章。。。
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(理解CSS的核心原则是它不那么烦人的关键)
实际上,在这种情况下非常简单:对图像应用垂直对齐。因为它都在一行中,所以它实际上是您想要对齐的图像,而不是文本。
<!-- 将“垂直对齐:中间”样式从span移动到img--><div><img style=“vertical align:middle”src=“https://via.placeholder.com/60x60“alt=”显示文本60 x 60的灰色图像“><span style=“”>有效</span></div>
在FF3中测试。
现在,您可以将flexbox用于这种类型的布局。
.box格式{显示:柔性;对齐项目:居中;}<div class=“box”><img src=“https://via.placeholder.com/60x60"><span style=“”>有效</span></div>