[英]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.