如何对齐中间页面中的图标？ fcc 产品登陆页面答案

【问题标题】：how can i align icons in my mid page? fcc product landing page如何对齐中间页面中的图标？ fcc 产品登陆页面
【发布时间】：2022-11-02 01:15:17
【问题描述】：

我正在从事 FCC 的产品登陆页面项目，我在对齐中间页面中的图标时遇到问题。这是代码https://jsfiddle.net/mvrxw/wn7t1fr2/1/

#sell {
  text-align: justify;
  display: flex;
  flex-direction: column;
  align-items: left;
}

.hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 6%;
}

.elemnt {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin-left: 30px;
  text-align: left;
}

i {
  color: grey;
}

<div id="sell">
  <div class="hero features">
    <i class="fa fa-gear" style="font-size:70px;"></i>
    <div class="elemnt">
      <h3>Only from renewable resource</h3>
      <p>We don't like to leave back footprints... shhh!</p>
    </div>
  </div>
  <div class="hero purchase">
    <i class="fa fa-dollar" style="font-size: 70px;"></i>
    <div class="elemnt">
      <h3>Renewable resource means lower prices!</h3>
      <p>Look at the options below, you might be curious ;)</p>
    </div>
  </div>
</div>

我尝试了所有使用 flex 和 margins 的方法，但我不想发现自己使用像素来对齐它们。

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用左边距和右边距来强制您的.hero div 进入显示中心，宽度为显示的 50%。这应该使您的图标与您现在具有平均大小的桌面显示的文本对齐，但是如果您的文本更短或您的显示更大（这样文本和图标一起不会占用 50% 的显示）您将不得不在让您的 div 完全居中或您的内容完全对齐之间做出选择。 justify-content 属性将确定这一点。

.hero{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    margin-top: 6%;
    margin-left: 25%;
    margin-right: 25%; 
}

【讨论】：