简单解释一下:
首先对父元素设置padding-top
,数值为height
的一半,这样对于子元素来说较容易实现垂直居中;除此之外还要设置position: relative
,以便子元素根据父元素的位置使用position: absolute
。
子元素垂直居中可使用margin-top
数值为height
的一半的负数;想左对齐或者右对齐对应使用left
或者right
就可以了。注意,top
和right
同时使用时,left
会失效。
CSS:
.header {
background-color: #C4B956;
width: 100%;
height: 60px;
position: relative;
padding-top: 30px;
}
.header > .left-logo {
background-image: url(../../%E6%B5%8B%E8%AF%95%E7%B4%A0%E6%9D%90/left-logo.png);
width: 117px;
height: 60px;
/*z-index: 5;*/
position: absolute;
left: 10px;
margin-top: -30px;/*为了居中,设为负高度的一半,因为父元素设置了padding-top: 30px;*/
}
.header > .center-logo {
background-image: url(../../%E6%B5%8B%E8%AF%95%E7%B4%A0%E6%9D%90/header-logo.png);
width: 256px;
height: 60px;
position: absolute;
left: 50%;
margin: -30px 0 0 -128px;
}
.header > .cart {
background-image: url(../../%E6%B5%8B%E8%AF%95%E7%B4%A0%E6%9D%90/cart.png);
width: 37px;
height: 37px;
position: absolute;
right: 10px;
margin-top: -18.5px;
}
HTML
<div id="header" class="header">
<div id="left_logo" class="left-logo"></div>
<div id="center_logo" class="center-logo"></div>
<div id="cart" class="cart"></div>
</div>