Question

我试图让Texas图标直接位于span和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元素的行高，并能够得到我想要的结果。我从问题的回答中学到了很多新东西。再次谢谢你。 Updated Screen Capture

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

2 个答案: