logo标签列表

垂直居中的问题：在div内垂直对齐，vertical-align: middle无效

htmlcssvertical-alignment
5

垂直对齐：middle; 无法运行。

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 居中对齐。
6个回答
18

执行这个操作

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

参考资料

你需要使用CSS Hack来实现这个。 - xkeshav
1
这是最好的答案！所有其他答案都试图重新发明HTML。 - Registered User
不支持IE7 - Abhishek
然而，这改变了div相对于块的对齐方式。 - André van Schoubroeck
4
你只能通过填充来实现这一点，因为其他两种方法——行高和垂直对齐——不能在 img 上起作用。
写入：
#logo
{
padding: 20px 0;
}

20px 可以根据您的需求调整。

这个方法虽然可行，但我认为这有点像是一个hack，我不明白为什么vertical-align:middle不起作用。 - mishap
我在 CSS 方面很擅长，但仍然经常遇到这种情况，垂直对齐在许多地方都无法满足我们的要求。 - Sonal Khunt
1
@Chuchelo：这不是黑客攻击，因为对于此情况并不存在垂直对齐的概念，因为它仅适用于内联元素。在SO上搜索“vertical align css”，你会找到成千上万的解释和解决方法。 - Sparky
0

我喜欢做这个：

<div style="relative">
<img alt="" id="logo" src="images/logo.png" style="position: absolute; top:50%; top-margin:-75px"/>
</div>
它是position:absolute;而不是absolute。 - Mr.T.K
2
@lnuyasha：另外，style="relative" 应该替换为 style="position: relative"，是吗？ - Tadeck
0

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

<!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 改变高度，这将使居中变得动态。但是，由于图像被从正常布局流中取出，相对定位可能会有些棘手。

1
提交之前我没有看到Pedro的回复，现在看到了。真希望我能轻松删除我的答案 :-) - Nathan Fox
0
#logo {
    position: absolute;
    top: 50%;
    margin-top: -75px;
}

垂直对齐的常见方法。将顶部设置为50％，并将margin-top设置为父div尺寸的负一半。

2
当然，父级元素必须被赋予position: relative;的样式。 - Tadeck
0

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

div {padding-top: 0%;}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接