在导航栏中垂直居中文本答案

【问题标题】：vertically center text in navigation bar在导航栏中垂直居中文本
【发布时间】：2016-07-01 11:47:32
【问题描述】：

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

目前，除了垂直对齐之外，导航栏一切正常。

我尝试了很多方法，例如行高、顶部和底部填充（弄乱了我的高度，导致文本 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>

感谢所有帮助，谢谢！

【问题讨论】：

标签： html css flexbox css-tables

【解决方案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>

【讨论】：

不客气。附带说明一下，没有必要在你的 css 属性中指定 0px 。请记住，0px、0%、0em、0rem、0pt 或零之后的任何其他单位标识符都是可选的。在我看来，不需要 0 中的单位，更清楚的是不要使用它们。干杯。

【解决方案2】：

有了 flexbox，你就非常接近了。

因为flex formatting context 只存在于父子之间，所以#nav 容器上的display: flex 到达divs，而不是锚点。

您还需要制作单个 div 的弹性容器，以便弹性对齐属性可以应用于锚元素。

html,
body {
    height: 100%;
    margin: 0px;
}

#nav {
    height: 10%;  /* This value will hide the nav bar on smaller windows */
    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; /* Will apply to child div elements, but not anchor elements */
}

#nav div {
    /* display: inline-block; */
    height: 100%;
    align-items: stretch;
    flex: 1;

    display: flex;            /* NEW; nested flex container */
    justify-content: center;  /* NEW; align anchor elements horizontally */
    align-items: center;      /* NEW; align anchor elements vertically */
}

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

【讨论】：