垂直对齐另一个div旁边的div。
垂直对齐另一个div旁边的div。
提问于 2015-02-01 17:12:52
我需要垂直对齐一个div，它的文本位于包含图像的div旁边。
内容可以在标题中有多行(如果您看到图像)。
当前html是如何实现的：
<div class="small-view">
<div class="small-left">
<img src="image.png" width="80">
</div>
<div class="small-right">
<p class="post-title">This is a post</p>
<span class="post-info>January 5, 2015</span>
</div>
</div>我想垂直对齐“小-右”的图像，所以它是基于其中的文本居中。因为某种原因，我所尝试的一切都不起作用。
回答 5
Stack Overflow用户
回答已采纳
发布于 2015-02-01 17:28:44
将所有块(divs & p)内联显示，并将垂直对齐应用于图像：
<div class="small-view">
<div class="small-left" style="display:inline;">
<img src="image.png" width="80" style="vertical-align:middle">
</div>
<div class="small-right" style="display:inline;">
<p class="post-title" style="display:inline;">This is a post</p>
<span class="post-info>January 5, 2015</span>
</div>
</div>对应码
您还可以使用单个div：
<div class="small-view">
<div class="small-left-and-right">
<p class="post-title">
<img src="image.png" width="80" style="vertical-align:middle">
This is a post
</p>
<span class="post-info>January 5, 2015</span>
</div>
</div>对应码
Stack Overflow用户
发布于 2015-02-01 17:44:04
.small-view div {
display: inline-block;
vertical-align: middle;
border: 1px pink solid;
}
.small-right {
width: 250px;
}<div class="small-view">
<div class="small-left">
<img src="image.png" style=" width: 80px;" />
</div>
<div class="small-right">
<p class="post-title">This is a post <span class="post-info">January 5, 2015</span>
</p>
</div>
</div>
给你:现在好多了:)
我所做的:我把
，更改80 >80 80更改了一些错误的"“
Stack Overflow用户
发布于 2015-02-01 17:24:42
你可以试试桌子。在一列中，图像和另一列中的文本
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28265399
复制相关文章
相似问题
腾讯云开发者
