Question

我一直试图将侧边栏垂直居中，但我却将其水平居中。我知道显示器：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;
}

Answer 1

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;

Answer 2

<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/

注意
我假设内容区域比导航栏列表高。

垂直居中<div>元素</div>

2 个答案: