html - 如何在不移动其他所有内容的情况下移动文本？

Question

我想将“社交媒体”一词移到两个图标上方作为标题。我遇到的问题是移动标题而不移动图标和书籍按钮。

你能帮忙吗？

.icons{
  font-size: 50px;
  color: blue;
  padding-top: 250px;
  padding-left: 110px;
}
.book {
  padding-left: 43.5%;
}
.book button {
  background-color: #F6B2A2; 
  border: none;
  color: black;
  text-decoration: none;
  font-size: 16px;
  height: 50px;
  width: 100px;
}
.book a {
  color: black;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="socialm">
    <h2>Social Media</h2>
</div>
<div class="icons">
        <a href="page2.php"><i class="fab fa-facebook-square"></i></a>
        <a href="page2.php"><i class="fab fa-instagram"></i></a>
</div>
<div class="book">
    <a href="page2.php"><button>Book</button></a>
</div>

Answer 1

您可以在您的 css 中为您的图标添加一个 display: block 和一个 display: inline-block:

.socialm {
  display: block;
}

.icons{
  display: inline-block;
  font-size: 50px;
  color: blue;
  padding-top: 250px;
  padding-left: 110px;
}

.book {
  display: block;
  padding-left: 43.5%;
}

.book button {
  background-color: #F6B2A2; 
  border: none;
  color: black;
  text-decoration: none;
  font-size: 16px;
  height: 50px;
  width: 100px;
}

.book a {
  color: black;
}