使用CSS垂直對齊元素

我有一個60px高的元素，其中包含其他元素，如圖像和其中一些跨度，我無法讓它們在60px高元素內垂直對齊。這裏的樣機和CSS：使用CSS垂直對齊元素

<div class="member"> 
    <img src="images/pic.png" alt="John Smiths's Profile Picture" class="pic"> 
    <span class="name"><a href="">John Smith</a></span> 
    <span class="skills">PHP, MySQL, Javascript, C#, Java</span> 
</div> 

#sidebar .member { 
    height: 60px; 
    margin-bottom: 10px; 
    vertical-align: center; 
} 

#sidebar .member .name { 
    font-size: 15px; 
    font-weight: bold; 
} 

#sidebar .member .pic { 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    float: left; 
    margin-right: 10px; 
} 

#sidebar .member .skills { 
    display: block; 
    font-size: 12px; 
    overflow: hidden; 
}

我已經把它掛在的jsfiddle：http://jsfiddle.net/CYFyx/2/

正如你所看到的，.member元素推到頂部內的元素。我需要他們像這樣垂直對齊：

enter image description here

已經嘗試過vertical-align: middle;但沒有運氣。

來源

2012-11-13 James Dawson

只能在td表格佈局中使用vertical-align: middle。所以，你必須添加一個div周圍的跨度

<div class="cell"> 
    <span class="name"><a href="">John Smith</a></span> 
    <span class="skills">PHP, MySQL, Javascript, C#, Java</span> 
</div>

與此性質

#sidebar .member .cell { 
    display: table-cell; 
    vertical-align: middle; 
    height: 50px; 
}

你可以在這裏進行測試：http://jsfiddle.net/Tn2RU/

來源

2012-11-13 20:22:18 Varon

最佳解決方案。這意味着我可以有一個文字環繞下一行，並仍然在中間浮動。謝謝！ –

'vertical-align：middle'不保留爲'display：table-cell'（或td）。其他意義在其他情況下是不同的。例如，它對於內聯元素具有不同的含義。 – Luke

嘗試把他們都在一個div，你可以使用

position:relative; 
margin-top: auto; 
margin-bottom: auto; 
height: XXpx;

來源

2012-11-13 20:18:39

您需要設置一個父元素和你的孩子的寬度的寬度，使他們必須進入下一行垂直對齊。

其他posibility將是您的父元素設置爲position:relative，然後用所有的孩子position:absolute和簡單地說，正是他們top:20px;的位置，然後下一個top:40px;等等等等

有了這個第二個解決方案，你可以得到所有兒童元素的精確像素定位。

這應該給你最好的結果。

來源

2012-11-13 20:20:27

你也可以把它們放進一個div並添加填充，以頂端。

HTML

<div id="block"> 
     <span class="name"><a href="">John Smith</a></span> 
     <span class="skills">PHP, MySQL, Javascript, C#, Java</span> 
</div>

CSS

#block { 
padding-top:5px; 
}

jsFiddle

來源

2012-11-13 20:25:13 Jason

使用CSS垂直對齊元素

回答

相關問題