使标题中的文本在所有屏幕上都能响应

Question

对于不同的屏幕分辨率，如何使“名称”文本居中对齐？我认为罪魁祸首是我将 TikTok 徽标隐藏在较小的屏幕上。提前感谢您的帮助！

HTML：

<div class="header">
  <h2 class="name">Name</h2>
  <a
    class="social-icon-header"
    href="https://www.tiktok.com/@xxx"
    target="_blank"
  >
    <i class="fab fa-tiktok fa-2x"></i>
  </a>
</div>

CSS：

/* Header */

.social-icon-header {
  display: none;
}

.name {
  text-align: center !important;
  justify-content: center !important;
  /* padding-left: 15%; */
}[![screenshots][1]][1]

Answer 1

您可以使用flexbox，并且不要忘记设置height（在本例中为min-height:100vh）属性。如果您还想垂直居中。如果不是，您可以将其删除。如果您想制作严格响应的文本，请使用this resource

/* Header */

.social-icon-header {
  display: none;
 
}

.name {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="header">
  <h2 class="name">Name</h2>
  <a class="social-icon-header" href="https://www.tiktok.com/@tretuser" target="_blank">
    <i class="fab fa-tiktok fa-2x"></i>
  </a>
</div>