div内部垂直对齐，垂直对齐：中间不起作用
[英]Vertical align inside div, vertical-align: middle not working
问题描述
垂直对齐：中间；垂直对齐： 不管用。
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 个解决方案
解决方案1
18 2011-12-03 06:39:55
解决方案2
5 已采纳 2011-12-03 07:00:43
您只能通过填充来执行此操作，因为line-height和vertical-align的其他两种方式无法在img ...上使用。
写
#logo
{
padding: 20px 0;
}
20px可以是您需要的任何值。
解决方案3
0 2013-07-10 09:57:48
我不知道为什么在我的情况下起作用...但是通过以下操作，我可以看到它起作用：
div {padding-top: 0%;}
解决方案4
0 2011-12-03 07:04:15
我喜欢这样做：
<div style="relative">
<img alt="" id="logo" src="images/logo.png" style="position: absolute; top:50%; top-margin:-75px"/>
</div>
解决方案5
0 2011-12-03 07:20:10
另一个选择，尽管它有其局限性：
<!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的中心：
如果您碰巧有一个div会改变高度，这将使居中动态。 但是，由于图像是从常规布局流程中取出的，因此相对位置可能会有些棘手。
解决方案6
0 2011-12-03 07:22:12
#logo {
position: absolute;
top: 50%;
margin-top: -75px;
}
进行垂直对齐的常用方法。 top为50％，margin-top为父div尺寸的一半。
div内块的垂直对齐中间
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.