-2

I want to center the text of my anchors (both horizontally and vertically) within their li container.

I've read that I can trivially center them orizzontally by using text-align: center; on the container.
But to center them vertically I would need to display li as a table and a as a table cell.

I didn't like this method so I put the text of the anchor into a div and tried to center the div with margin: auto;. For some reason this works only horizontally, even though the div is a block element with a defined height. Anyone knows the reason why?

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>
anotherOne
  • 1,513
  • 11
  • 20
  • Actually no, it doesn't work. I removed the `div` and applied `text-align: center;` to `li` and `vertical-align: middle;` to `a`. I don't know why but `vertical-align` moves the text just a little bit dow, a very very little bit. – anotherOne Jan 09 '21 at 16:24
  • See the flexbox method.. its very simple – Anurag Srivastava Jan 09 '21 at 16:34
  • Yes it is simple with flexbox, but isn't also inefficent? Should I create a flexbox container evry time I want to center a word of text? – anotherOne Jan 09 '21 at 16:37
  • 1
    Why not? And how is it inefficient, any sources you can cite? Basically just 3 lines of text, which you are going to write anyway – Anurag Srivastava Jan 09 '21 at 16:42
  • What is your problem with flexbox? A flexbox is a very simple and effective way to align content vertically. But in your case i would use `padding` to center my links (see answer below). That is more responsive! – dagrega Jan 09 '21 at 16:52
  • @AnuragSrivastava I found this one https://css-tricks.com/does-flexbox-have-a-performance-problem/. But anyway even with a tie in performances, it would be better to use old rules that work in any case instead of using new tools that may require fallback. (Assuming that the old rules are reasonably easy to implement and that they give the same output) – anotherOne Jan 09 '21 at 22:05

2 Answers2

0

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>
dagrega
  • 163
  • 1
  • 11
  • Yes I knew that, but I din't want to make a flex container just to align a word of text. And anyway I would like to know why the `margin: auto` doesn't work. But thank you anyway for the answer! – anotherOne Jan 09 '21 at 16:34
  • Why not use a `flexbox` to center your text? You can't vertically center relative objects with `margin: auto`, that works only with absolute/fixed objects. – dagrega Jan 09 '21 at 16:38
0

Another option is to remove the absolute height and width of the links and use padding instead.

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>
dagrega
  • 163
  • 1
  • 11