Question

我想垂直对齐div“.person-user”，使其垂直位于父元素“.person”的中心（文本位于照片的中心，但右侧）怎么能我这样做了？

由于

http://jsfiddle.net/mpBW5/5/

Answer 1

这应该是简单的，但实际上是背后的痛苦。这是一个快速的jsFiddle，在person div上使用display：table，并在图片包装器和info divs上显示：table-cell：

http://jsfiddle.net/2yfDs/1/

Answer 2

以下是标记和样式的组合，它们可以完全满足您的需求，不使用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时使用它，我真的会使用标记和上面的样式解决方案相反。

Answer 3

这是一个非常常见的问题，到目前为止最好的解释是：

http://phrogz.net/css/vertical-align/index.html

Answer 4

最精确的方法是使用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;}

我希望这能回答你的问题吗？

垂直对齐父级中的div

4 个答案:

标记：

样式：