Question 43489 in Html Question posted in
Some basic documentation can be found here.

<span> in <a> vertically not aligned – Html

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    you can use flexbox for ul element. like this

    ul {
   display: flex;
   align-items: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search