html - 将图标和标题与基线对齐

Question

我正在构建一个响应式网站，我想要这张图片中的行为:

图标的底部边缘(基线)与标题的底部边缘对齐，但我无法以响应方式做到这一点。这是我尝试过的:

• 将 position: relative 添加到父级，将 position: absolute 添加到图标，并使用 left 和更改位置右 和底部。这行得通，但没有响应(图标的位置在不同的屏幕尺寸上会发生变化)。

• 为它们(图标和标题)添加vertical align: text-bottom，但这也不起作用

• 添加 display: block 到图标和 left: 0 和 right: 0 使图标居中。这很有效，我添加了一个 padding right 以便将图标定位在标题前面。它在我切换设备工具栏时起作用:

当我减小视口(viewport)宽度时:

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

问题是，如上所示，图标和标题未与基线对齐。我尝试添加 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>