导航栏中的垂直居中文本

Question

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

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

我尝试了很多方法，例如行高、填充到顶部和底部（弄乱了我的高度所以文本 div 溢出）、flex 和 table 显示。

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

您可以使用 table 和 table 单元格方法。基本上，您需要将 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>

Answer 2

对于 flexbox，你已经非常接近了。

因为 flex formatting context 仅存在于 parent 和 child 之间，您在 #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>

导航栏中的垂直居中文本

vertically center text in navigation bar

html

css

css-tables

flexbox