时间戳

首页 > 解决方案 > 如何在同一行上水平居中 2 个或多个 div

html - 如何在同一行上水平居中 2 个或多个 div

问题描述

无论分辨率如何，如何将它们居中，在同一条线上，彼此之间具有相同的宽度？

<div id="stats">
<div class="box">
    <i class="fas fa-cloud"></i>
    <p>Members</p>
</div>
<div class="box">
    <i class="fas fa-cloud"></i>
    <p>Awards</p>
</div>
<div class="box">
    <i class="fas fa-cloud"></i>
    <p>Countries</p>
</div>
</div>

标签： htmlcss

解决方案

您可以为此flexbox使用css：

#stats {
  display: flex;
  justify-content: space-evenly;
}
<div id="stats">
  <div class="box">
    <i class="fas fa-cloud"></i>
    <p>Members</p>
  </div>
  <div class="box">
    <i class="fas fa-cloud"></i>
    <p>Awards</p>
  </div>
  <div class="box">
    <i class="fas fa-cloud"></i>
    <p>Countries</p>
  </div>
</div>

在此处阅读更多相关信息。

推荐阅读