Горизонтальное выравнивание двух изображений

Чтобы выровнять два изображения по горизонтали, вы можете использовать display: flex; на 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>

Будет ли это то, что вы ищете?

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

Как предлагает @tacoshy, вы должны уточнить свою проблему. Что вы имеете в виду под выравниванием их по вертикали?

Обновлено: Хм, кажется, @Kameron лишила меня награды, дав законный ответ. Я также поддерживаю его ответ.

Старый ответ: Ну, я предполагаю, что вы пытались выровнять их в x направлении. Ожидаемое поведение не может быть достигнуто с помощью vertical-align. Вместо этого вы можете использовать макеты CSS, такие как CSS Flexbox или Grid для достижения этой цели. Я буду использовать для этого Flexbox, потому что он гибкий в использовании.

Прежде всего, вы должны сделать родителем этих изображений flex. Так:

nav {
  display: flex;
}

Оба изображения уже должны были быть выровнены по вертикали.

БОНУС:

Вы не следуете лучшим практикам создания навигации. Сначала создайте неупорядоченный список (ul) и поместите в него два списка (li). Теперь поместите гиперссылки внутри каждого элемента списка. Дайте каждому элементу списка класс logo.

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

Во-вторых, в CSS вы также можете сократить некоторые избыточные строки кода. Обратите внимание, что к обоим изображениям неоднократно применяются одни и те же стили. Вы можете свернуть его, схватив селектор обоих и применив стили за один раз. Например:

/* 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;
}

В-третьих, вы можете захотеть выровнять заголовок. Вы можете добиться этого, просто добавив text-align: center в стиль вашего заголовка. Например:

.name {
  text-align: cetner;
}

Надеюсь это поможет!