使图标和标题与基线对齐

Question

我正在建立一个响应式网站，我想要此图片中的行为：

图标的底部边缘（基线）与标题的底部边缘对齐，但是我无法以响应方式进行操作。这是我尝试过的：

• 将position: relative添加到父级，将position: absolute添加到图标，并使用left和right和bottom更改位置。可以，但是没有响应（图标的位置在不同的屏幕尺寸上会发生变化）。

• 向两者（图标和标题）添加vertical align: text-bottom，但这都不起作用

• 在图标上添加display: block，并在图标的中心添加left: 0和right: 0。那行得通，我在右边添加了一个填充，以便将图标放置在标题的前面。当我切换设备工具栏时，它会起作用：

当我减小视口宽度时：

当我切换到设备工具栏时：

问题是，如上所示，图标和标题未与基线对齐。我尝试添加display: inline-block来拥有padding-bottom和margin-bottom的功能，但这也没有用。我希望你能帮助我。

这是我的代码段：

body {
  background-color: purple;
}

.container {
  position: relative;
  height: 6rem;
  background-color: red;
  transition: height .1s;
}

.container-add {
  height: 21rem;
}

.hamburger-btn {
  position: absolute;
  right: 4px;
  font-size: 40px;
  color: white;
  margin-top: 33px;
  margin-right: 10px;
}

.logo-box {
  display: inline-block;
}

.logo {
  width: 50%;
  margin-left: 1.2rem;
  margin-top: .8rem
}

.main-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 13.62rem;
  align-items: center;
  visibility: hidden;
}

.main-nav-hide {
  visibility: visible;
}

.main-nav-item {
  list-style: none;
  color: white;
  font-family: Roboto;
  text-transform: uppercase;
  font-weight: 700;
  /* display: none; */
}

.main-nav-link {
  text-decoration: none;
  color: inherit;
  padding-left: 20px;
}

.slideshow-container {
  max-width: 100%;
  width: 100vw;
  height: 55vh;
  position: relative;
}

.imgSlide {
  width: 100%;
  height: 53vh;
}

.imgSlide-show {
  display: block;
}

.dotz {
  text-align: center;
  position: absolute;
  bottom: 3vh;
  left: 0;
  right: 0;
  margin: auto;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background-color: #ddd
}

.active {
  background-color: #ff9900;
}

.active:hover,
.dot:hover {
  cursor: pointer;
}

.fade-zz {
  animation-name: fade;
  animation-duration: 1.4s;
  transition: .4s
}

@keyframes fade {
  from {
    opacity: .4;
  }
  to {
    opacity: 1
  }
}

.contact-box {
  background-color: red;
  position: relative;
  top: -1rem;
  height: 380px;
}

.conbox {
  color: white;
  display: block;
  text-align: center;
  font-size: 2rem;
  /* margin-top: .8rem; */
}

.adress {
  color: white;
  text-align: center;
  font-family: roboto;
  margin-bottom: 3rem;
  position: relative;
  top: .5rem;
}

.phone {
  color: white;
  text-align: center;
  font-family: roboto;
  margin-bottom: .8rem;
}

.opening-time {
  color: white;
  text-align: center;
  font-family: roboto;
  margin-top: 2rem;
}

.about-us {
  color: black;
  font-family: Roboto;
  position: relative;
}

.title {
  text-align: center;
}

.abicon {
  text-align: center;
  display: inline-block;
  font-size: 2rem;
  position: absolute;
  left: 0;
  right: 0;
  padding-right: 130px;
  margin: auto;
}

.title-description {
  display: block;
  margin: auto;
}

<div class="container">

  <div class="logo-box">
    <img src="images/logo.png" class="logo" alt="logo">
  </div>
  <i class="fas fa-bars hamburger-btn"></i>
  <ul class="main-nav">
    <li class="main-nav-item"><a class="main-nav-link" href="#">services</a></li>
    <li class="main-nav-item"><a class="main-nav-link" href="#">reservation</a></li>
    <li class="main-nav-item"><a class="main-nav-link" href="#">menu</a></li>
    <li class="main-nav-item"><a class="main-nav-link" href="#">our chefs</a></li>
    <li class="main-nav-item"><a class="main-nav-link" href="#">events</a></li>
  </ul>

</div>

<div class="slideshow-container">
  <div class="mySlides fade-zz">
    <img src="images/food3.png" class="imgSlide">
  </div>
  <div class="mySlides fade-zz">
    <img src="images/pizza.png" class="imgSlide">
  </div>

  <div class="mySlides fade-zz">
    <img src="images/hamburger2.png" class="imgSlide">
  </div>

  <div class="dotz">
    <span class="dot" onclick="currentSlide(1-1)"></span>
    <span class="dot" onclick="currentSlide(2-1)"></span>
    <span class="dot" onclick="currentSlide(3-1)"></span>
  </div>


</div>





<div class="contact-box">
  <div class="adress">
    <i class="fas fa-map-marker-alt conbox"></i>
    <h3 class="contact-title">Address</h3>
    <p class="contact-description">4579 Penn Street,Manchester<br>united kingdom</p>
  </div>
  <div class="phone">
    <i class="fas fa-phone-volume conbox"></i>
    <h3 class="contact-title">Phone</h3>
    <p class="contact-description">636-399-9776 <br> 573-225-7350</p>
  </div>
  <div class="opening-time">
    <i class="far fa-clock conbox"></i>
    <h3 class="contact-title">Opening time</h3>
    <p class="contact-description">all the days of the week <br>from 6 am to midnight</p>
  </div>
</div>

<section class="about-us">
  <i class="fas fa-utensils abicon"></i>
  <h1 class="title">About us</h1>
  <p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla </p>
</section>

谢谢。

Answer 1

技巧是将文本为"abicon"的类为<h1>的图标移到.abicon内。然后，您可以从.about-us { color: black; font-family: Roboto; position: relative; } .title { text-align: center; } .abicon { /* text-align: center; display: inline-block; font-size: 2rem; position: absolute; left: 0; right: 0; padding-right: 130px; margin: auto; */ } .title-description { display: block; margin: auto; }选择器中删除所有样式。

（请注意，在此代码段中，我删除了所有不必要的元素，以便您可以更好地了解情况。）

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

<section class="about-us">
  <h1 class="title"><i class="fas fa-utensils abicon"></i> About us</h1>
  <p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla </p>
</section>

contentView