How to vertically align awesome font icons?

Asked

Viewed 135 times

-2

I would like the Font Awesome icon to be aligned vertically in the center of the div <nav>, same as class item logo on a screen smaller than 480px. I tried with line-height, but it didn’t work out like the other.

Exemplo

Code:

* {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

:root {
    --texto-branco: #f2f2f2;
    --fundo-preto:#262626;
    --fundo-azul:#009DFF;
}


nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    padding: 0 10%;
    background: var(--fundo-preto);
    box-sizing: border-box;
}

.logo {
    float: left;
    line-height: 64px;
    color: var(--texto-branco);
}

.menu {
    color: var(--texto-branco);
    cursor: pointer;
    float: right;
    display: none;
}

ul {
    text-align: right;
    display: block;
}

li {
    display: inline-block;
    padding: 0 16px;
    list-style: none;
}

li:hover {
    background: var(--fundo-azul);
}

a {
    color: var(--texto-branco);
    line-height: 64px;
    text-decoration: none;
}



@media  (max-width: 480px) {
    .menu {
        display: block;
    }

    ul {
        display: none;
    }

}
<html lang="pt-br">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <script src="https://kit.fontawesome.com/a3703589d3.js" crossorigin="anonymous"></script>
      <title>VM Design</title>
  </head>
  <body>
      <nav>
          <div class="logo"><p>M</p></div>
          <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Sobre</a></li>
              <li><a href="#">Projetos</a></li>
              <li><a href="#">Fale Comigo</a></li>
          </ul>
          <div class="menu"><i class="fas fa-bars"></i></div>
      </nav>
  </body>
</html>

html css

2 answers

2

Just use Flexbox, applying the following styles within the media query:

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

To magic is made by display: flex and by align-items, aligns items vertically by default. How do we define this property as center, the items will be aligned to the center.

See the final example. You are already without the line-height:

* {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

:root {
    --texto-branco: #f2f2f2;
    --fundo-preto:#262626;
    --fundo-azul:#009DFF;
}


nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    padding: 0 10%;
    background: var(--fundo-preto);
    box-sizing: border-box;
}

.logo {
    float: left;
    line-height: 64px;
    color: var(--texto-branco);
}

.menu {
    color: var(--texto-branco);
    cursor: pointer;
    float: right;
    display: none;
}

ul {
    text-align: right;
    display: block;
}

li {
    display: inline-block;
    padding: 0 16px;
    list-style: none;
}

li:hover {
    background: var(--fundo-azul);
}

a {
    color: var(--texto-branco);
    line-height: 64px;
    text-decoration: none;
}



@media  (max-width: 780px) {
    .menu {
        display: block;
    }

    ul {
        display: none;
    }

    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
<html lang="pt-br">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <script src="https://kit.fontawesome.com/a3703589d3.js" crossorigin="anonymous"></script>
      <title>VM Design</title>
  </head>
  <body>
      <nav>
          <div class="logo"><p>M</p></div>
          <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Sobre</a></li>
              <li><a href="#">Projetos</a></li>
              <li><a href="#">Fale Comigo</a></li>
          </ul>
          <div class="menu"><i class="fas fa-bars"></i></div>
      </nav>
  </body>
</html>

Copying the idea of @Sam’s reply, I changed the breakpoint to make it easier to view the changes.

To learn more, read basic concepts of flexbox, or the Complete flexbox guide in CSS Tricks(En).

  • It has to line up without using flex-box, because when I go to make the menu open for mobile align-items would not cause me problems?

  • Why would it? I don’t think so.

  • When I change ul { display: None } to { display:block} it will align these items vetically as well, when they need to be something like flex-start

1

Use flexbox on nav with the property align-items: center that the child elements will be aligned vertically in the center. Now, it is necessary to remove the float: right that will not work in flexbox. In place you can use margin-left: auto which icon will position itself to the right of the container (also remove the float: left; as soon as it will no longer be necessary).

In the example below I increased the breakpoint max-width: 480px for 780px for viewing purposes only.

Example:

* {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

:root {
    --texto-branco: #f2f2f2;
    --fundo-preto:#262626;
    --fundo-azul:#009DFF;
}


nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    padding: 0 10%;
    background: var(--fundo-preto);
    box-sizing: border-box;
    display: flex; /* adicionado */
    align-items: center; /* adicionado */
}

.logo {
    /*float: left; removido */
    line-height: 64px;
    color: var(--texto-branco);
}

.menu {
    color: var(--texto-branco);
    cursor: pointer;
    /*float: right; removido */
    display: none;
    margin-left: auto; /* adicionado */
}

ul {
    text-align: right;
    display: block;
}

li {
    display: inline-block;
    padding: 0 16px;
    list-style: none;
}

li:hover {
    background: var(--fundo-azul);
}

a {
    color: var(--texto-branco);
    line-height: 64px;
    text-decoration: none;
}



@media  (max-width: 780px) {
    .menu {
        display: block;
    }

    ul {
        display: none;
    }

}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<nav>
    <div class="logo"><p>M</p></div>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Projetos</a></li>
        <li><a href="#">Fale Comigo</a></li>
    </ul>
    <div class="menu"><i class="fas fa-bars"></i></div>
</nav>

  • I will follow your suggestion and increase the breakpoint to make it easier to see the changes. Good idea. :)

  • only the pray!...

  • Is there any way I can do this without using a flexbox? Because it causes me problems when I change the display ul to block when I go to do the open menu part.

  • Yes. Put it in the class. menu: position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.