我想垂直对齐div“.person-user”,使其垂直位于父元素“.person”的中心(文本位于照片的中心,但右侧)怎么能我这样做了?
由于
答案 0 :(得分:1)
这应该是简单的,但实际上是背后的痛苦。这是一个快速的jsFiddle,在person div上使用display:table,并在图片包装器和info divs上显示:table-cell:
答案 1 :(得分:1)
以下是标记和样式的组合,它们可以完全满足您的需求,不使用JavaScript和JQuery 。
<div class="person">
<img class="profile" src="http://sphotos-a.xx.fbcdn.net/hphotos-ash4/320450_10151028382307410_534533150_n.jpg"/>
<div class="profile">
<div class="name">Colin Pacelli</div>
<div class="fact">Ohio University</div>
</div>
</div>
.person {
display: table;
}
.person img.profile{
height: 50px;
margin-right: 10px;
/*border-radius: 4px 4px 4px 4px;*/
}
.person div.profile {
display: table-cell;
vertical-align: middle;
/*font-family: calibri;
font-size: 14px;
color: #444;*/
}
/*.person .profile .name {
font-weight: bold;
}*/
我已经注释掉了主要不影响解决方案的规则,因此如果做得好,所有人都可以看到使用CSS所需的时间。与使用在虚拟机上运行的32Kb客户端代码运行的10行代码相比。你认为Adobe Flash Player是邪恶的。我不介意JQuery,特别是对于它可以做得很好的事情,但坦率地说,将JQuery纳入纯粹风格的明确案例中只是有点太多了。
正如您可能想到的那样,我已经编辑了您的JSFiddle,剥离了非必需品,并将其剪切为一个最小的示例,展示了所需的行为,同时保留了视觉效果。
由于您已将html
和css
指定为标记,并且因为几乎在所有情况下最好不要在可以避免使用JavaScript / JQuery时使用它,我真的会使用标记和上面的样式解决方案相反。
答案 2 :(得分:0)
这是一个非常常见的问题,到目前为止最好的解释是:
答案 3 :(得分:0)
最精确的方法是使用jQuery执行此操作并为每个div动态计算它。如果某些/所有图像/文本div具有不同的高度,这将非常有用。 example。{{3}}。代码:
$("div.person-user").each(function() {
$(this).css("marginTop", function() {
var imgH = $(this).prev("div.person-user-pic").height(),
thisH = $(this).height(),
h = (imgH/2) - (thisH/2);
return h;
});
});
但是:如果每个div和图像都有相同的高度,你可以这样做:
div.person-user {margin-top: 8px;}
我希望这能回答你的问题吗?