html - margin: auto; doesn't center div vertically

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

html - margin: auto; doesn't center div vertically

asked Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

224 views

1 Answer

深蓝 · Answer 1 · 2021-10-06T18:45:50+0000

You can use a flexbox again - like you did with the ul!

Display .nav ul li a as a flexbox, then use align-items: center;, to vertically center your link.

Your fixed code:

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>

Categories

html - margin: auto; doesn't center div vertically

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags