Html 如何垂直对齐图像旁边的 DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6282403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically align a DIV next to an image?
提问by Sash
I have the following html code:
我有以下 html 代码：
<div id="personalInfo">
<img class="photo" alt="" src="...." />
<div id="details">
<p>
<label class="label">Name:</label>
<label class="detailsLabel"></label>
</p>
<p>
<label class="label">Date of birth:</label>
<label class="detailsLabel"></label>
</p>
<p>
<label class="label">Employee id:</label>
<label class="detailsLabel"></label>
</p>
<p>
<label class="label">Status:</label>
<label class="detailsLabel"></label>
</p>
</div>
</div>
and the following css:
和以下CSS：
#personalInfo
{
width: 35%;
float: left;
clear: left;
margin-top: 5%;
margin-left: 2%;
font-size: 1.3em;
}
#details { margin-left: 5%; }
.photo {
vertical-align: middle;
width: 150px;
height: 150px;
float: left;
margin-left: 3%;
border: 1px solid #d1c7ac; }
.label { margin-top: 2%; margin-left: 5%; font-weight: bold; }
.detailsLabel { margin-top: 5%; margin-left: 0.5%; }
I need the 'details' div to be vertically aligned to middle relatively to the image. How can I accomplish that?
我需要“详细信息”div 相对于图像垂直对齐到中间。我怎样才能做到这一点？
Thanks !!!
谢谢 ！！！
回答by Wolfgang Kuehn
Use display: inline-block.
使用display: inline-block.
#details {
display: inline-block;
vertical-align:middle;
border:solid black 1px;
width: 300px;
}
.photo {
display: inline-block;
vertical-align:middle;
width: 300px;
height: 300px;
border: 1px solid #d1c7ac;
}
回答by bingjie2680
try this
尝试这个
#personalInfo{
float: left;
margin-top: 5%;
margin-left: 2%;
font-size: 1.3em;
}
img{float:left;border:1px solid #333}
#details{float:left;padding:10px 0 10px 0}
working example: http://jsfiddle.net/bingjie2680/DSmKu/
工作示例：http: //jsfiddle.net/bingjie2680/DSmKu/
the idea is to float left both the image and details. by doing so two elements will have the same height. and then you can make the detail div padding top and bottom some space.
这个想法是浮动的图像和细节。通过这样做，两个元素将具有相同的高度。然后你可以让细节 div 填充顶部和底部一些空间。
回答by luca
basically what I would do is:If you can specify a fixed height (corresponding to your image height) for your outer container(#personalInfo div)..do it! then I will set this #personalInfo position to relative. After that I will set your #details div position to absolute so that I can shift it to 50% from top and i would set margin-top:-yy where yy is half the height of the #details to offset the item up:
基本上我会做的是：如果你可以为你的外部容器（#personalInfo div）指定一个固定的高度（对应于你的图像高度）..做吧！然后我将这个 #personalInfo 位置设置为相对。之后，我将您的 #details div 位置设置为绝对位置，以便我可以将它从顶部移动到 50%，我将设置 margin-top:-yy 其中 yy 是 #details 高度的一半以向上偏移项目：
give a look here
看看这里
