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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

https://jsfiddle.net/04bup35k/

this is the output i want to achieve
[1]: https://i.stack.imgur.com/9cpk8.png

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.logo-container {
    display: flex;
    align-items: center;
    /* add any other styles you need */
}

<!-- language: lang-html -->

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

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

<!-- end snippet -->

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!

Would this be what you are looking for?

.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 {
  display: inline-block;
}

.logo2 {
  display: inline-block;
}