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

您可以使用table和table-cell方法。基本上，您需要将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仅存在于父级和子级之间，因此display: flex容器上的#nav已达到div s，而非锚点。

您还需要创建单个divs flex容器，因此flex alignment属性可以应用于锚元素。

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>

导航栏中的垂直居中文本

2 个答案: