如何垂直對齊圖像旁邊的DIV？

我有以下的html代碼：如何垂直對齊圖像旁邊的DIV？

<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%; }

我需要的「細節」 div來垂直對齊到中相對的圖像。我該怎麼做到這一點？

謝謝！

來源

2011-06-08 Sash

也許這只是我，但我不知道你是什麼意思''我需要'細節'div垂直對齊中間相對於圖像。 – thirtydot 2011-06-08 17:03:30

看這裏 - http://img703.imageshack.us/img703/2591/examplekc.png 我需要所有的標籤（在'細節'div）在圖像的中間，並在它旁邊。 .. – Sash 2011-06-08 17:07:42

啊，我明白了。我的窗戶很窄，所以文字在圖像下面。 – thirtydot 2011-06-08 18:59:27

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

來源

2011-06-08 17:45:44

你是我的救星！非常感謝 - 作品魅力！ – Sash 2011-06-08 18:29:17

試試這個

#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填充頂部和底部的一些空間。

來源

2011-06-08 17:19:50 bingjie2680

但細節不在圖片的中間... – Sash 2011-06-08 17:27:25

在圖片的中間或旁邊的圖片？ – bingjie2680 2011-06-08 17:28:32

在圖片的中間，但在它旁邊... – Sash 2011-06-08 17:32:15

基本上我會做的是：如果你可以爲你的外部容器（#personalInfo div）指定一個固定的高度（對應於你的圖像高度）..做到這一點！那麼我會將此＃個人信息位置設置爲相對。之後，我會將您的#details div位置設置爲絕對位置，以便我可以將它從頂部移動到50％，並且我會設置margin-top：-yy其中yy是#details高度的一半以抵消該項目：

給看看here

來源

2011-06-08 17:27:51 luca

感謝您的回覆......但我的詳細信息div是動態的 - 它並不總是包含所有的四個標籤，因此與我的情況下yy的部分是不可能的... – Sash 2011-06-08 17:46:40

如何垂直對齊圖像旁邊的DIV？

回答

相關問題