页眉中的 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;
}

页眉中的 TikTok 徽标未与名称对齐

TikTok Logo in Header not lining up with name

css

tiktok