在图像旁边垂直对齐文字？
为什么不行vertical-align: middle？但是，vertical-align: top 确实 可以。
span{
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>
问题答案：
实际上，在这种情况下，这非常简单：对图像应用垂直对齐。由于所有内容都在同一行中，因此它实际上是要对齐的图像，而不是文本。
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
在FF3中测试。
现在，您可以将flexbox用于这种类型的布局。
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
-
我试图创建一个网页的主横幅旁边的图像标题。我尝试做的一个示例可以在下面找到：https://optimaninja.com/ 我正在使用bootstrap,下面是一些我必须开始的简单初学者代码： 引导代码： 谢谢你的帮助。
-
问题内容： 我有一个包含图像和ap标签的div（如下所示）。我想根据段落的多少行在div的中间垂直对齐图像。垂直对齐不起作用。我现在正在使用JavaScript找出要添加到margin- top的数量，但是宁愿使用CSS。有任何想法吗？ 问题答案： 尝试将元素的属性设置为图像的高度，例如： 编辑： 刚意识到我读错了问题，却错过了多行的事实。尝试的一种选择是完全删除元素，并将其设置为of的，使用的o
-
我想有一个头像图像，右边有两个垂直对齐的div。 https://jsbin.com/qafiroquve/1/edit?html，css，输出 我读过很多关于这方面的帖子，但似乎没有一篇对我有帮助。 将图像放在左侧的30%主div（）宽度和div的70%宽度的最佳方法是什么？ 如果div（或）中的任何一个有太多文本，我希望div与其左侧的图像垂直对齐。我还希望这个div与图像有一个边距。 我尝试
-
问题内容： 我在div中垂直对齐图像时遇到问题 据我所知，我需要“显示：块；” 定位图像在中心，这是可行的。同样在教程中，我找到了很多答案，但它们并不是“有用的”，因为我的所有图像都不在同一高度！ 问题答案： 如果容器中的高度固定，则可以将line-height设置为与高度相同，并且它将垂直居中。然后只需添加text-align使其水平居中即可。 编辑 您的代码应如下所示： 更新 现在是2016年
-
问题内容： 如何在容器中对齐图像？ 例 在我的例子，我需要垂直居中的在用“： 的高度是固定的，图像的高度是未知的。如果这是唯一的解决方案，则可以添加新元素。我正在尝试在Internet Explorer 7和更高版本的WebKit，Gecko上执行此操作。 在这里查看jsfiddle 。 问题答案： 唯一的（和最好的跨浏览器）的方式，因为我知道是使用佣工，并在这两个元素。 因此，有一个解决方案：h
-
垂直对齐 1. grid-template-areas 属性值保持换行，并使用空格保持每列垂直对齐。 例如： .foo { grid-template-areas: "header header" "nav main" "footer ...."; } 2. grid、grid-template