Question

我有以下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>

以及以下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相对于图像垂直对齐到中间。我怎么能做到这一点？

谢谢!!!

Answer 1

使用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; 
}

Answer 2

试试这个

#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}

工作示例：http://jsfiddle.net/bingjie2680/DSmKu/

这个想法是将图像和细节都向左移动。通过这样做，两个元素将具有相同的高度。然后你可以使细节div填充顶部和底部的一些空间。

Answer 3

基本上我要做的是：如果你可以为你的外容器指定一个固定的高度（对应你的图像高度）（#personalInfo div）..去做吧！然后我将这个#personalInfo位置设置为relative。之后，我将你的#details div位置设置为绝对，这样我就可以将它从顶部移到50％，我会设置margin-top：-yy，其中yy是#details的高度的一半，以抵消项目：< / p>

看看here

如何垂直对齐图像旁边的DIV？

3 个答案: