Question

我想将锚点的文本（水平和垂直）居中放置在其 li 容器中。

我读过我可以通过在容器上使用 text-align: center; 来轻松地将它们居中。
但是要使它们垂直居中，我需要将 li 显示为表格，将 a 显示为表格单元格。

我不喜欢这种方法，因此我将锚点的文本放入 div 并尝试将 div 与 margin: auto; 居中。出于某种原因，即使 div 是具有定义高度的块元素，这也只能在水平方向上工作。有人知道原因吗？

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
  height: 4em;
  background-color: #783F27;
}
nav ul li a {
    display: block;
    border: solid medium;
    border-radius: 0.4em;
    margin: 0 0.5em;
    width: 7em;
    height: 3em;
    color: goldenrod;
}
a div {
    width: max-content;
    height: max-content;
    margin: auto;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Learning</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href=""><div>Menu</div></a></li>
        <li><a href=""><div>News</div></a></li>
        <li><a href=""><div>About</div></a>
        <li><a href=""><div>Contact</div></a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

Answer 1

您可以再次使用 flexbox - 就像使用 ul 一样！

将 .nav ul li a 显示为弹性框，然后使用 align-items: center; 将链接垂直居中。

您的固定代码：

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
  height: 4em;
  background-color: #783F27;
}
nav ul li a {
    display: flex;
    align-items:center;
    border: solid medium;
    border-radius: 0.4em;
    margin: 0 0.5em;
    width: 7em;
    height: 3em;
    color: goldenrod;
}
a div {
    width: max-content;
    height: max-content;
    margin: auto;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Learning</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href=""><div>Menu</div></a></li>
        <li><a href=""><div>News</div></a></li>
        <li><a href=""><div>About</div></a>
        <li><a href=""><div>Contact</div></a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

Answer 2

另一种选择是删除链接的绝对 height 和 width，并使用 padding 代替。

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
  height: 4em;
  background-color: #783F27;
}
nav ul li a {
    display: block;
    border: solid medium;
    border-radius: 0.4em;
    margin: 0 0.5em;
    color: goldenrod;
    padding: .75em 2em;
}
a div {
    width: max-content;
    height: max-content;
    margin: auto;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Learning</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href=""><div>Menu</div></a></li>
        <li><a href=""><div>News</div></a></li>
        <li><a href=""><div>About</div></a>
        <li><a href=""><div>Contact</div></a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

保证金：自动；不垂直居中 div

2 个答案: