[英]Vertically centering a <div> element
我一直在尝试将侧边栏垂直居中,但是我将其水平居中。 我知道display:table; 但这不是我想要的,因为我将把主要内容区域放在侧边栏旁边。 这是代码和样式:
<div class="sidebar">
<ul>
<li>Homepage</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
</ul>
</div>
CSS:
div.sidebar{
background-color: #DEFFFF;
width: 156px;
height: 385px;
}
div.sidebar a{
color: black;
display: block;
}
div.sidebar ul li{
margin-left: -33px;
list-style-type: none;
width: 140px;
height: 25px;
border-right: 1px solid black;
border-top: 1px solid black;
border-left: 1px solid black;
background-color: #BCA264;
font-family: bold;
}
CSS3解决方案: http : //jsfiddle.net/RazvanGirmacea/HDyuX/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
display: box;
box-orient: vertical;
box-pack: center;
<div class="parentPanel">
<div class="content">
<img src="http://placehold.it/400x500">
</div>
<div class="sidebar">
<ul>
<li>Homepage</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
</ul>
</div>
</div>
并使用以下CSS
.parentPanel {
border: 1px solid blue;
}
.content {
border: 1px solid blue;
display: inline-block;
vertical-align: middle;
}
.content img {
display: block;
}
.sidebar {
border: 1px solid blue;
display: inline-block;
vertical-align: middle;
}
您可以根据需要调整内容区域的大小,并设置边栏和链接的样式。
供参考: http : //jsfiddle.net/audetwebdesign/KUFRK/
注意
我认为内容区域比导航栏列表高。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.