如何将图标与标题而不是段落对齐？答案

【问题标题】：How to align an icon with a title but not the paragraph?如何将图标与标题而不是段落对齐？
【发布时间】：2020-11-05 07:40:13
【问题描述】：

应老师的要求，我必须使用引导程序和网格重现此表，但我不明白如何将图标与标题对齐 同时保持段落与标题垂直对齐。

我在 flex 中尝试过，但我无法很好地对齐。

我也尝试使用列表并更改了列表样式但图标未对齐...

所以我尝试在绝对位置，但它似乎没有任何复杂......

#gout article {
  width: 300px;
  margin-right: 20px;
  position: relative;
}

#gout #art-naturel::before {
  content: url(../img/organic-2.png);
  position: absolute;
  left: -60px;
  top: -20px;
}

#gout #art-bio::before {
  content: url(../img/organic-1.png);
  position: absolute;
  left: -60px;
  top: -20px;
}

#gout #art-encas::before {
  content: url(../img/grain-1.png);
  position: absolute;
  left: -60px;
  top: -20px;
}

#gout #art-calorie::before {
  content: url(../img/organic-1.png);
  position: absolute;
  left: -60px;
  top: -20px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<section id="gout" class="container">

  <!-- LIGNE 1  -->
  <div class="row">
    <section class="col-12 d-flex flex-wrap justify-content-around">
      <article>
        <h3>Du naturel <br> au goûter ?</h3>
      </article>
      <article id="art-naturel">
        <h4>Du naturel</h4>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores ipsum saepe soluta rerum ipsa.</p>
      </article>

      <article id="art-bio">
        <h4>Exploitation bio</h4>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores ipsum saepe soluta rerum ipsa.</p>
      </article>
  </div>


  <!-- LIGNE 2  -->
  <div class="row">
    <section class="col-12 d-flex flex-wrap justify-content-around">
      <article> </article>
      <article id="art-encas">
        <h4>Encas</h4>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores ipsum saepe soluta rerum ipsa.</p>
      </article>

      <article id="art-calorie">
        <h4>Calories</h4>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores ipsum saepe soluta rerum ipsa.</p>
      </article>
  </div>
  </section>

你能解释一下以干净的方式将图标与文本对齐的最佳方法是什么？

在这种情况下，让我感到困惑的是段落......

【问题讨论】：

getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

标签： html css twitter-bootstrap layout

【解决方案1】：

我猜这就是您希望元素对齐的方式。

HTML

<html>
<head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
    <body>
    <div class="row">
      <div class="col-md-4">
        <article>
        <img class="pl-5 pt-5" src="https://media-exp1.licdn.com/dms/image/C560BAQHH3QDd1WaMVA/company-logo_200_200/0?e=2159024400&v=beta&t=EqNLQ1MfX-edLauEkAsFP2evAuCvDzrfg0qmTAAhYQ4"/>
      </div>
      <div class="col-md-8 pt-5">
        <h3>Du naturel <br> au goûter ?</h3>
        </article>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <article id="art-naturel">
            <h4>Du naturel</h4>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores ipsum saepe soluta rerum ipsa.</p>
          </article>
      </div>
      <div class="col-md-4">
        <article id="art-bio">
            <h4>Exploitation bio</h4>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores ipsum saepe soluta rerum ipsa.</p>
          </article>
          
      </div>
    </div>
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
          <article id="art-encas">
            <h4>Encas</h4>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores ipsum saepe soluta rerum ipsa.</p>
          </article>
        </div>
        <div class="col-md-4">
          <article id="art-calorie">
            <h4>Calories</h4>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores ipsum saepe soluta rerum ipsa.</p>
          </article>
        </div>
          
      </div>
</body>
</html>

我在 HTML 而不是 CSS 中添加了图标，以便于对齐。我已经对 CSS 中的图像进行了评论。

我没有更改 CSS 中的任何内容。

    #gout article {
      width: 300px;
      margin-right: 20px;
      position: relative;
    }
    
    #gout #art-naturel::before {
      //content: url(../img/organic-2.png);
      position: absolute;
      left: -60px;
      top: -20px;
    }
    
    #gout #art-bio::before {
      //content: url(../img/organic-1.png);
      position: absolute;
      left: -60px;
      top: -20px;
    }
    
    #gout #art-encas::before {
      //content: url(../img/grain-1.png);
      position: absolute;
      left: -60px;
      top: -20px;
    }
    
    #gout #art-calorie::before {
      content: url(../img/organic-1.png);
      position: absolute;
      left: -60px;
      top: -20px;
    }

【讨论】：