Html 垂直对齐导航菜单中的链接我只是想知道如何在垂直方向上导航菜单中的链接对齐，因为我已经尝试过垂直对齐，并且它不工作，并且已经搜索了堆栈溢出，并且没有找到答案。注：_Html_Css_Navigation_Vertical Alignment_Navbar

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

html css navigation

Html 垂直对齐导航菜单中的链接我只是想知道如何在垂直方向上导航菜单中的链接对齐，因为我已经尝试过垂直对齐，并且它不工作，并且已经搜索了堆栈溢出，并且没有找到答案。注：,html,css,navigation,vertical-alignment,navbar,Html,Css,Navigation,Vertical Alignment,Navbar,代码如下： CSS: HTML: <body height="1000px" bgcolor="#2E2E2E"> <div class="menuandtop"> <div class="top"> </div> <br> <br> <br> <br> <br> <div class="left"> <ul class="navmen

代码如下：

CSS:

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>

给您：

只需添加以下代码：

.left {
  display:table;
}

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

更新：更新小提琴

虽然在firefox上运行良好，但在chrome上，li的高度似乎会产生某种错误，因此请删除以下内容：

.navmenu li{
 height: 20%;
}

更新的fiddle:

有几种方法可以实现这一点，一种方法是创建一个高度为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;
}

：after伪元素用于创建不可见元素

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

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

你检查小提琴了吗？他不想增加身高。他想把整个街区移动到左分区的垂直中心。。。我注意到虽然它在firefox上看起来很棒，但在chrome上看起来就像你说的那样。。。让我来看看，当我让li进入整个页面时，链接回到顶部，我必须点击链接，而不是整个框，最后一个链接的底部hlaf被切断。以下是我的意思[链接]（）。请尝试使用更新的小提琴。你显示的屏幕截图来自第一小提琴。。。

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