css - 标题中的 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 元素中的两个。并尝试使用对齐项目在父容器上进行 flex。

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

.name {
    font-size: 250%;
}

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