我如何将 div#headerinner 中的 div#headerinner 和 div#headerinner 中的 img.header 垂直居中？
我试过使用vertical-align，但没有任何效果。
我已经能够手动计算像素数并使用填充，但是有没有一种方法可以自动垂直对齐并适用于此处？
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-color:red;
}
div#headerouter {
width:100%;
height:120px;
background-color:yellow;
}
div#headerinner {
position: relative;
margin-left: auto;
margin-right: auto;
width: 900px;
height:100px;
background-color:blue;
}
img.header {
display: block;
margin-left: auto;
margin-right: auto;
}
span#login {
position: absolute;
padding-top: 10px;
left: 10px;
}
div#menu {
position:absolute;
margin-left: auto;
margin-right: auto;
height:40px;
line-height:40px;
width:100%;
background-color:black;
}
div#menu ul {
position:relative;
align:top;
text-align: center;
height:40px;
line-height:40px;
vertical-align:middle;
background-color:green;
}
div#menu li {
display: inline;
padding-right: 50px;
}
</style>
</head>
<body>
<div id="headerouter">
<div id="headerinner">
<span id="login">Welcome!</span>
<img class="header" src="mysite/heading.png" alt="Header">
</div>
</div>
<div id="menu">
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div>
</body>
</html>
最佳答案
在您的 ID 选择器中使用 display: table; 和 display: table-cell;..
div#headerouter {
width:100%;
height:120px;
background-color:yellow;
display: table;
}
div#headerinner {
position: relative;
margin-left: auto;
margin-right: auto;
width: 900px;
height:100px;
background-color:blue;
vertical-align: middle;
display: table-cell;
}
关于html - 如何在彼此之间垂直对齐多个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24586796/