导航栏中的垂直居中文本

Question

我正在尝试制作一个导航栏,其中按钮的文本将在垂直中心对齐.

目前,除垂直对齐外,导航栏的一切正常.

我已经尝试了很多方法,例如行高,填充到顶部和底部(弄乱我的高度以便文本div溢出),flex和表格显示.

html,
body {
  height: 100%;
  margin: 0px;
}
#nav {
  height: 10%;
  background-color: rgb(52, 152, 219);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: white;
  font-family: Calibri;
  font-size: 200%;
  text-align: center;
  display: flex;
}
#nav div {
  display: inline-block;
  height: 100%;
  align-items: stretch;
  flex: 1;
}
#nav div:hover {
  background-color: rgb(41, 128, 185);
  cursor: pointer;
}

<div id="main">
  <div id="nav">
    <div><a>Home</a></div>
    <div><a>Page2</a></div>
    <div><a>Page3</a></div>
    <div><a>Page4</a></div>
    <div><a>Page5</a></div>
  </div>
</div>

感谢所有帮助,谢谢!

Answer 1

您可以使用表和表格单元格方法.基本上你需要将css属性添加display: table到父元素和子元素display: table-cell; vertical-align: middle.

增加高度以用于演示目的.

#nav {
  height: 50%;
  background-color: rgb(52, 152, 219);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: white;
  font-family: Calibri;
  font-size: 200%;
  text-align: center;
  display: table;
}
#nav div {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
#nav div:hover {
  background-color: rgb(41, 128, 185);
  cursor: pointer;
}

<div id="main">
  <div id="nav">
    <div><a>Home</a>
    </div>
    <div><a>Page2</a>
    </div>
    <div><a>Page3</a>
    </div>
    <div><a>Page4</a>
    </div>
    <div><a>Page5</a>
    </div>
  </div>
</div>