title: How to position image to be directly vertically centered between two elements
body: <p>I am trying to get the Texas icon directly centered between the span and h1 element. </p>
  
  <p>Here is the <a href="https://i.stack.imgur.com/9tIfX.png" rel="nofollow noreferrer">Screen Capture</a></p>
  
  <p>I tried googling but I think I might be phrasing what I need poorly. Is it that I have to adjust the padding and margin in css? I just want to move the icon down the y-axis.</p>
  
  <p>Thank you</p>
  
  <pre><code> &lt;header id="top" class="main-header"&gt;
        &lt;span class="title"&gt;Keep it Weird in&lt;/span&gt;
     &lt;div&gt;
      &lt;img class="texas-icon" src="https://image.ibb.co/cGRVFG/texasicon_1.png" alt="texasicon_1" border="0"&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;h1&gt;Austin&lt;/h1&gt;
  
  
  
      .main-header {
    padding-top: 170px;
    height: 850px;
    background: linear-gradient(lightblue, transparent 90%),
                linear-gradient(0deg, #fff, transparent),
                #ffa949 url('https://media.giphy.com/media/3ohs7I9ho0H4dfeP7y/giphy.gif') no-repeat center;
  
    background-size: cover;
  
  
  
  }
  
  .title {
    color: white;
    font-size: 1.625rem; /* 26px/16px */
    letter-spacing: .065em;
    font-weight: 200px;
    padding-bottom: 10px;
  }
  h1 {  
    font-size: 12.5rem; /* 90px/16px  */
    color: rgba(255, 255, 255, 1);
    text-transform: capitalize;
    font-weight: normal;
    text-align: center;
    line-height: 1.3;
    margin: 12px 0px 0px;
       }
  </code></pre>