title: Vertically center align image in horizontal menu
body: <p>I want to have an image (my logo) to be in the very center of my nav menu which is horizontal and at the top of my page. So far, each tag(including my image) inside my topnav div spreads evenly. I want the elements on either side of my logo to spread evenly but I want my image to be in the middle. Perhaps I should use two divs on the same line and stick the logo in the middle?</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;div class="topnav" id="myTopnav" &gt;
      &lt;a href="Home%20Page.html"&gt;Sustainability&lt;/a&gt;
      &lt;a href="Environment.html"&gt;Climate Change&lt;/a&gt;
      &lt;img src="Images/Climate-Hikewhite.png" height="50px" href="Home%20Page.html" /&gt;
      &lt;a href="DIY.html"&gt;Help At Home&lt;/a&gt;
      &lt;a href="Contact.html"&gt;Contact Us&lt;/a&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS</p>
  
  <pre><code>/*NAVIGATION BAR */
  /* Add a black background color to the top navigation */
  
  .topnav {
  background-color: #000;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  justify-content: space-around;
  text-decoration: none;
  font-size: 24px;
  color: #000;
  width: 100%;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
  list-style: none;
  margin: 0 2px;
  padding-top: 10px;
  padding-bottom: 5px;
  display: flex;
  justify-content: space-around;
  text-decoration: none;
  font-size: 17px;
  color: #EEE;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  
  
  }
  .titletext {
  list-style: none;
  margin: 0 2px;
  padding-top: 10px;
  padding-bottom: 5px;
  display: flex;
  justify-content: space-around;
  text-decoration: none;
  font-size: 17px;
  color: #FFF;
  font-family: Papyrus, fantasy;
  }
  /* Change the color of links on hover */
  .topnav a:hover {
  background-color: #000;
  color: green;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
  background-color: #4CAF50;
  color: white;
  }
  </code></pre>