0

I would like to have a <ul> inside my <nav>, in which I need to have a <span> inside an <a> tag.

The problem here is that the first li is vertically not aligned with others and this gives something ugly. After exploring a bit with the F12 I saw that the span tag was higher than the a. Here is a quick preview of the render

render.

The table display is here so that space is correctly distributed to each li (I have 5)

I tried to change the position of the span and of the a but it didn't work.

nav {
  position: fixed;
  top: 0;
  left: 0;
  background: #dfc8b3;
  width: 100%;
  text-align: center;
  display: table;
  margin-bottom: 1em;
}

ul {
  display: table-row;
}

li {
  list-style: none;
  display: table-cell;
  font-size: large;
}

a.navlist {
  color: black;
  float: top;
}
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
      rel="stylesheet">

<nav>
  <ul>
    <li class="navlist"><a href="index.html#" class="navlist"><span class="material-symbols-outlined">home</span></a></li>
    <li class="navlist"><a href="" class="navlist">li 1</a></li>
  </ul>
</nav>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Bastien Boutteau
  • 3
  • 2
  • Welcome to Stack Overflow! Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) - I made you one now – mplungjan Mar 26 '23 at 08:48

2 Answers2

1

There is a problem with your icons

When displayed exactly as you have shown in your code, we see only text, and that is correctly aligned.

The explanation for your misalignment in your local code is that your icons are different in height. The vertical-align: middle; CSS option will correct the position.

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  display: table;
  margin-bottom: 1em;
}

ul {
  display: table-row;
  background: #dfc8b3;
}

li {
  list-style: none;
  display: table-cell;
  font-size: large;
}

a.navlist {
  color: black;
  float: top;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

<nav>

  <ul>
    <li class="navlist"><a href="index.html#" class="navlist"><span class="">home</span></a> </li>
    <li class="navlist"><a href="" class="navlist">li 1</a>No Icon</li>
  </ul>
<p></p>

  <ul>
    <li class="navlist"><a href="index.html#" class="navlist"><span class="material-symbols-outlined" >home</span></a></li>
    <li class="navlist"><a href="" class="navlist">li 1</a> With icon</li>
  </ul>

<p></p>

  <ul>
    <li class="navlist"><a href="index.html#" class="navlist"><span class="material-symbols-outlined" style="   vertical-align: middle;">home</span></a></li>
    <li class="navlist"><a href="" class="navlist">li 1</a>Icon + vertical-align: middle</li>
  </ul>



</nav>
ProfDFrancis
  • 8,816
  • 1
  • 17
  • 26
0

you can use flexbox for ul element. like this

ul {
   display: flex;
   align-items: center;
}
Milad
  • 61
  • 7