0

enter image description here

How can I center the house to be aligned with the text Home?

<nav class="main-nav nav">
  <img src="img/logopng.PNG" class="nav-img">
  <ul>
    <li class="align-li-nav">
      <img src="img/house_48px.png" class="nav-li-img"><a href="" class="nav-text">Home</a>
    </li>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Vaxind
  • 96
  • 1
  • 1
  • 7
  • Check this out, this might help you out: [https://stackoverflow.com/questions/27360375/how-to-align-list-items-with-font-awesome-icon-next-line-text](https://stackoverflow.com/questions/27360375/how-to-align-list-items-with-font-awesome-icon-next-line-text) – Arnav Pandey CH Dec 06 '21 at 20:31

2 Answers2

0

ul { list-style: none; }

ul li { 
display: flex; 
align-items: center;
}

ul li img { max-width: 50px; height: auto; }
<ul>
<li><img src="https://static.thenounproject.com/png/77002-200.png" /><a href="#">Home</a>
</ul>
li { 
   display: flex;
   align-items: center;
}

You may need to put display: block; on the a tag but that should work

OMGDrAcula
  • 1,054
  • 3
  • 11
  • 17
0

You can do that using Flexbox.

.align-li-nav {
  display: flex;
  align-items: center;
}

https://www.w3schools.com/css/css3_flexbox.asp

flexboxfroggy.com is a nice game to learn how to use Flexbox

SamiElk
  • 2,272
  • 7
  • 20