Question

垂直对齐：中间;没有用。

From css file :
#header {height:150px; text-align: center; vertical-align: middle;}

<div id="header">
    <img alt="" id="logo" src="images/logo.png" />
</div>

如果有助于将徽标与包装div的中心对齐，我会将徽标包装在另一个div中。

Answer 1

这样做

#header {display:table;}
#logo {display:table-cell; vertical-align:middle;}

Reference

Answer 2

您只能通过填充来执行此操作，因为其他两种方式line-height和vertical-align无法在img上运行....

写

#logo
{
padding: 20px 0;
}

20px可以是您需要的任何内容。

Answer 3

我喜欢这样做：

<div style="relative">
<img alt="" id="logo" src="images/logo.png" style="position: absolute; top:50%; top-margin:-75px"/>
</div>

Answer 4

另一种选择，虽然它有其局限性：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <div style="height:150px; text-align: center;">
      <img src="/centerme.jpg" style="position: relative; top: 50%; margin-top: -25px;" />
   </div>
</body>
</html>

负边距应为图像高度的一半。因此，以下图片将以上述HTML为中心：

enter image description here

如果碰巧有一个改变高度的div，这会使居中动态。但是相对定位可能会有点棘手，因为图像是从正常的布局流程中取出的。

Answer 5

#logo {
    position: absolute;
    top: 50%;
    margin-top: -75px;
}

进行垂直对齐的常用方法。 top为50％，margin-top为父div的维度的一半。

Answer 6

我不知道为什么它在我的情况下有效...但我可以通过以下方式看到它起作用：

div {padding-top: 0%;}

div内垂直对齐，垂直对齐：中间不工作

6 个答案: