[英]Vertically aligning elements with CSS
我有一個高60像素的元素,其中包含其他元素,如圖像和幾個跨度,我無法讓它們在60px高元素內垂直對齊。 這是模型和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
元素中的元素.member
推。 我需要它們垂直對齊,如下所示:
已經嘗試過vertical-align: middle;
但沒有運氣。
您只能在td表布局vertical-align: middle
使用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/
嘗試將它們全部放在可以使用垂直對齊的div中
position:relative;
margin-top: auto;
margin-bottom: auto;
height: XXpx;
您需要設置父元素的寬度和子元素的寬度,以便它們必須進入下一行。
另一個可能性是將你的父元素設置為position:relative
,然后在所有子元素上使用position:absolute
,並簡單地將它們精確定位在top:20px;
,然后下一個top:40px;
等等
使用第二種解決方案,您可以獲得所有子元素的精確像素定位。
這將積極地給你最好的結果。
您也可以將它們放入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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.