[SOLVED] horizontal align two images

horizontal align two images

[enter image description here][1]On my website, I'm planning to put two images but I can't vertically align them. I tried line-height and vertical alignment. but I can't figure out where I went wrong or what codes I'm lacking.

.logo img {
  height: 150px;
  width: 150px;
  margin: 20px;
  padding: 3px;
  margin-top: 10px;
  vertical-align: middle;
}

.logo2 img {
  height: 150px;
  width: 150px;
  margin: 20px;
  padding: 3px;
  margin-top: 10px;
  vertical-align: middle;
}

<div class="main">
  <nav>
    <a href="guest_login.php" class="logo">
      <img src="images/guesticon.png">
      <h2 class="name">GUEST</h2>
    </a>

    <a href="officer_login.php" class="logo2">
      <img src="images/policeicon.png">
      <h2 class="name">ADMIN</h2>
    </a>

https://jsfiddle.net/04bup35k/

this is the output i want to achieve [1]: https://i.sstatic.net/9cpk8.png

Solution

To horizontally align the two images you can use display: flex; on nav.

.logo img {
  height: 150px;
  width: 150px;
  margin: 20px;
  padding: 3px;
  margin-top: 10px;
  vertical-align: middle;
}

.logo2 img {
  height: 150px;
  width: 150px;
  margin: 20px;
  padding: 3px;
  margin-top: 10px;
  vertical-align: middle;
}

.logo,
.logo2 {
 text-align: center;
}


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

<div class="main">
  <nav>
    <a href="guest_login.php" class="logo">
      <img src="images/guesticon.png">
      <h2 class="name">GUEST</h2>
    </a>

    <a href="officer_login.php" class="logo2">
      <img src="images/policeicon.png">
      <h2 class="name">ADMIN</h2>
    </a>
  </nav>
</div>