垂直对齐图像和文本div
垂直对齐图像和文本div
提问于 2013-06-12 21:25:06
更新:答案已经让我接近了，但它们仍然没有垂直对齐，因为文本div更大，我如何使它们都保持相同的高度，从而对齐？
我希望有两个DIV在彼此旁边，一个包含图像，一个包含文本，两者都位于一个容器DIV中。
图像应该是容器div宽度的15%，文本使用其余的85%。
图像和文本应该在各自的DIVs内垂直对齐，因此看起来它们是对齐的。
我试过想办法解决这个问题，但似乎做不到！有人能帮忙吗？
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}和
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div> 回答 7
Stack Overflow用户
发布于 2013-06-12 21:42:08
下面是对代码的修改：http://jsfiddle.net/hQ6Vw/1/
我所做的唯一改变就是为img和p标记分配匹配的上/下边距。我想这会给你带来你想要的效果。
Stack Overflow用户
发布于 2013-06-12 22:05:28
如果您使用浮动和垂直对齐，这两者将不会一起工作。
浮动从规则流中提取自身，在规则流中的任何内容之后，在下一行的一侧或另一侧滑动。
垂直对齐工程：
- 在中间内联框中(内联块级元素或使用
display:inline-block;显示) - 内部td或它的CSS默认显示：
display:table-cell;这里更新了jsfiddle @TXChetG - 使用
display:inline-block;http://jsfiddle.net/GCyrillus/hQ6Vw/2/ - 使用
display:table/* table-cell*/;http://jsfiddle.net/GCyrillus/hQ6Vw/3/
Stack Overflow用户
发布于 2013-06-12 21:31:35
这应该能让你接近：
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>用图像替换灰色背景div，用文本替换蓝色背景div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17075627
复制相关文章
相似问题
腾讯云开发者
