垂直对齐: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 居中对齐。
垂直对齐: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>
img
上起作用。#logo
{
padding: 20px 0;
}
20px
可以根据您的需求调整。
我喜欢做这个:
<div style="relative">
<img alt="" id="logo" src="images/logo.png" style="position: absolute; top:50%; top-margin:-75px"/>
</div>
style="relative"
应该替换为 style="position: relative"
,是吗? - Tadeck另一个选择,虽然它有其局限性:
<!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>
如果您的 div 改变高度,这将使居中变得动态。但是,由于图像被从正常布局流中取出,相对定位可能会有些棘手。
#logo {
position: absolute;
top: 50%;
margin-top: -75px;
}
垂直对齐的常见方法。将顶部设置为50%,并将margin-top设置为父div尺寸的负一半。
position: relative;
的样式。 - Tadeck我不知道为什么它在我的情况下起作用了...但是我可以通过以下方式看到它正在工作:
div {padding-top: 0%;}