0

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

谢谢

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

4

4 回答 4

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 行代码相比。你认为 Adob​​e Flash Player 是邪恶的。我不太介意 JQuery，尤其是对于它可以做得很好的事情，但坦率地说，将 JQuery 包含在纯粹风格的明确案例中有点过分了。

正如您可能想象的那样，我已经编辑了您的 JSFiddle，去除了不必要的内容并将其缩减为一个最小的示例，该示例展示了所需的行为，同时保留了视觉效果。

由于您将htmland指定css为标记，并且由于在几乎所有情况下都可以避免使用 JavaScript/JQuery 是一个更好的主意，因此我真的会使用像上面这样的标记和样式解决方案。

于 2012-10-10T18:39:53.750 回答
1

这应该是简单的事情，但实际上是一件很痛苦的事情。这是一个快速的 jsFiddle，在 person div 上使用 display: table，在图片包装器和 info div 上使用 display: table-cell：

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

于 2012-10-10T15:47:03.977 回答
0

最精确的方法是使用 jQuery 并为每个 div 动态计算它。如果某些/所有图像/文本 div 具有不同的高度，这将很有用。例子。_ 编码：

$("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;}

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

于 2012-10-10T18:07:29.427 回答
0

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

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

于 2012-10-10T15:40:17.230 回答