Question

我只是想知道如何在垂直中间的导航菜单中对齐链接，因为我尝试了垂直对齐并且它不起作用并且已经搜索了堆栈溢出并且没有找到答案。

注意： navmenu通常会占据整个页面的长度，链接位于顶部，而不是中间。这是fiddle

以下是代码：

CSS：

* {
    padding: 0px;
    margin: 0px;
}

.top {
    position: fixed;
    background-color: red;
    border-radius: 10px;
    width: 100%;
    min-width: 1024px;
    height: 100px;
    border-radius: 10px;
    border: 4px solid white;
}

.left {
    position: fixed;
    float: left;
    margin-top: 5px;
    width: 30%;
    height: 100%;
    background-color: red;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 4px solid white;
}

.menuandtop { bgcolor: yellow; }

.main {
    width: 90%;
    margin: 0px;
    height: 100%;
    background-color: pink;
    border-radius: 10px;
    float: right;
}

a { text-decoration: none; }

.navmenu { list-style-type: none; }

.navmenu li a {
    color: #2E2E2E;
    font-family: arial;
    font-face: arial;
    font-weight: bold;
}

ul.navmenu a {
    display: block;
    text-decoration: none;
}

.navmenu li {
    background: rgb(255,50,50);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMzIzMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmNmQ2ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUyJSIgc3RvcC1jb2xvcj0iI2ZmMjgyOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,50,50,1)), color-stop(50%, rgba(255,109,109,1)), color-stop(52%, rgba(255,40,40,1)), color-stop(100%, rgba(255,0,0,1)));
    background: -webkit-linear-gradient(top, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
    background: -o-linear-gradient(top, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
    background: linear-gradient(to bottom, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#ff0000', GradientType=0 );
    filter: none;
    height: 20%;
    text-align: center;
}

.li1 { border-bottom: 1px solid #2E2E2E; }

.li2 { border-top: 1px solid #2E2E2E; }

.li3 {
    border-top: 1px solid #2E2E2E;
    border-bottom: 1px solid #2E2E2E;
}

HTML：

<body height="1000px" bgcolor="#2E2E2E">
<div class="menuandtop">
  <div class="top"> </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div class="left">
    <ul class="navmenu">
      <li class="li1"><a href="index.html" class="a1">Home</a></li>
      <li class="li3"><a href="index.html" class="a1">Home</a></li>
      <li class="li3"><a href="index.html" class="a1">Home</a></li>
      <li class="li3"><a href="index.html" class="a1">Home</a></li>
      <li class="li2"><a href="index.html" class="a1">Home</a></li>
    </ul>
  </div>
</div>
<div class="footer"> </div>
</body>

Answer 1

有一些方法可以实现，一种方法是创建一个100％高度的不可见内联块元素，导航垂直对齐。通过以下方式更改CSS：

.left{
    position: fixed;
    float: left;
    margin-top: 5px;
    width: 30%;
    height: 100%;
    background-color: red;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 4px solid white;
    font-size: 0;
}

字体大小设置为0以删除空格。

.left:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
}

以下：伪元素用于创建不可见元素。

.navmenu{
    display: inline-block;
    font-size: 16px;
    list-style-type: none;
    width: 100%;
}

然后将菜单设置为内联块，并将字体大小设置为偏移父元素中的归零字体大小。

http://jsfiddle.net/D7V7p/

Answer 2

你在这里：

http://jsfiddle.net/J7P2c/

只需添加以下代码：

.left {
  display:table;
}

.navmenu{
  display:table-cell;
  vertical-align:middle;
}

更新：更新小提琴，

虽然在Firefox上它工作正常，但在Chrome的高度上似乎出现了某种错误，所以删除以下内容：

.navmenu li{
 height: 20%;
}

更新了小提琴：http://jsfiddle.net/Vr8cv/1/

在导航菜单中垂直对齐链接

2 个答案: