如何在图像旁边垂直对齐DIV? [英] How to vertically align a DIV next to an image?
本文介绍了如何在图像旁边垂直对齐DIV?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下html代码:
I have the following html code:
<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>
和以下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%; }
我需要'details'div垂直对齐到中间相对于图像。
我如何实现这一点?
I need the 'details' div to be vertically aligned to middle relatively to the image. How can I accomplish that?
谢谢!!!
推荐答案
使用 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;
}
这篇关于如何在图像旁边垂直对齐DIV?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文