时间戳

首页 > 解决方案 > 边距：自动；不垂直居中 div

html - 边距：自动；不垂直居中 div

问题描述

我想将我的锚的文本（水平和垂直）放在它们的li容器中。

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

我不喜欢这种方法，所以我将锚的文本放入 adiv并尝试将divwith居中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>

标签： htmlcssmargincenter

解决方案

另一种选择是删除绝对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>

推荐阅读