如何将图像定位在两个元素之间直接垂直居中

Question

我试图将德克萨斯图标直接居中在跨度和H1元素之间。

这是屏幕捕获

我尝试搜索谷歌搜索，但我认为我可能会逐步说出我的需求不足。是我必须调整CSS中的填充和保证金吗？我只想将图标向下移动y轴。

谢谢

 <header id="top" class="main-header">
      <span class="title">Keep it Weird in</span>
   <div>
    <img class="texas-icon" src="https://image.ibb.co/cGRVFG/texasicon_1.png" alt="texasicon_1" border="0"></a>
      </div>
      <h1>Austin</h1>

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

Answer 1

我认为 text-align:center在您的情况下就足够了，然后只需播放元素的边距即可创建空格：

header {
  background: blue;
  text-align: center;
  color: #fff;
  max-height: 380px;
  padding: 50px 25px 0px;
}
.title {
  margin: 5px 0;
  font-size: 1.3rem;
  border: none;
  display: inline-block;
}
h1 {
  margin: 10px 0;
  font-size: 5rem;
  line-height: 1.1;
}

<header id="top" class="main-header">
  <span class="title">Keep it Weird in</span>
  <div>
    <a href=""><img class="texas-icon" src="https://image.ibb.co/cGRVFG/texasicon_1.png" alt="texasicon_1" border="0"></a>
  </div>
  <h1>Austin</h1>
</header>

Answer 2

感谢您的支持。不幸的是，这些解决方案都没有起作用，但我决定只是改变H1元素的线高度，并能够获得我想要的结果。我从对问题的回答中学到了很多新事物。再次谢谢你。更新的屏幕捕获