Question

所以我已成功地将我的LI元素中的文本与来自少数SOF成员的帮助隔开:)

我的最后一个问题是尝试将导航栏垂直居中于其父容器，以及在放大或缩小时停止页面元素的破坏。

另外，如果此人的浏览器分辨率较小，我是否有办法调整页面内容的大小？

HTML：

<div class="h_headerbar">
   <div class="h_navbar">
       <nav>
          <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Advertising</a></li>
          <li><a href="#">Publishing</a></li>
          </ul>
       </nav>
   </div>
</div>

CSS：

body{
background-color:#565656;
}
.h_headerbar{
width:100%;
background-color:black;
height:125px;
}
.h_navbar{
    width:100%;
    text-align:center;
    display:table;
    vertical-align:middle;
}
.h_navbar li{
    list-style-type:none;
    display:inline-block;
    width:100px;
    height:35px;
    background-color:black;
    text-align:center;
    border:3px solid #111;
    margin:0px 25px 0px 25px;
    border-radius:5px;
}
.h_navbar li:hover{
background-color:#191919;
}
.h_navbar a{
    text-decoration:none;
    display:table-cell;
    color:white;
    font-size:18px;
    vertical-align:middle;
    width:100px;
    height:35px;
}

JSFiddle

Answer 1

如果你不关心IE6和7中的向后兼容性，你可以添加：

display: table-cell;
vertical-align: middle;

到容器div样式。

如何垂直对齐此导航栏？

1 个答案: