horizontal align two images – Html

As @tacoshy suggests, you should elaborate your problem. What do you mean by aligning them vertically?

EDIT:
Hmm, seems like @Kameron robbed my bounties by giving an legitimate answer. I also upvote his answer.

Old answer:
Well, I’m assuming that you were trying to align them in x direction. The behaviour you’re expecting can’t achieved by using vertical-align. Instead, you can use CSS layouts such as, CSS Flexbox or Grid to achieve this. I’m gonna use Flexbox for this, because it’s flexible to use.

First of all, you have to make the parent of those images flex. Like this:

nav {
  display: flex;
}

Both of the images should’ve been aligned vertically by now.

BONUS:

You are not following the best practices of making a navigation. First, make an unordered list (ul) and put two list (li) inside of it. Now put hyperlinks inside of each list element. Give each list element a logo class.

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

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

Secondly, in CSS, you can also reduce some redundant lines of code. Notice that you have the same styles applied to both of the images repeatedly. You can minimize it by grabbing the selector of both and apply styles for once. For example:

/* This line following styles will make images align vertically. */
nav ul {
  display: flex;
  height: 150px;
}

.logo {
  flex: 1; /* To give them equal amount of free space */
  margin: 20px;
  margin-top: 10px;
  padding: 3px;
}

.logo img {
  width: 150px;
}

Thirdly, you may want to align heading. You can achieve this by simply adding text-align: center in your heading’s style. For example:

.name {
  text-align: cetner;
}

Hope this helps!