头中的TikTok标志不与名称对齐

Question

我的TikTok标志没有出现在标题中，也没有与名称对齐。我该怎么解决这个问题？提前谢谢你的帮助。

​

​

HTML：

 <div class="header">
    <h2 class="name">Name</h2>
    <a class="social-icon-header" href="https://www.tiktok.com/@xxx" target="_blank">
        <img class="tiktok" src="images/TikTok-Icon-Logo.wine.svg">
    </a>
</div>

CSS：

.name {
font-size: 250%;
padding-top: 1%; 
 }


/* Social Icon */
.tiktok {
  width: 4em;
  height: auto;
  position: relative;
  float: right;
  }

Answer 1

您使用的是冲突的浮动和位置相对。尝试删除tiktock元素中的这两个元素。并尝试在父容器上使用对齐项。

​

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.name {
    font-size: 250%;
}

/* Social Icon */
.tiktok {
    width: 4em;
    height: auto;
}

​