Question

我如何在div＃headerouter中垂直居中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>

Answer 1

JsFiddle

在您的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;
}

如何在一个彼此垂直对齐多个元素

1 个答案: