根据具有较大宽度的同级元素的中心

debugcn 发表于 Dev

用户名

我有一组统计信息，其样式如下所示，但如果要使该组居中，则它将使用延伸过去并具有较大宽度的描述的宽度。仅根据统计数字的宽度居中并在其下方仍具有描述的最简单方法是什么？

.container {
    text-align: center;
}

.stats {
    display: block;
    margin: 0 auto 30px auto;
}
.left-stats {
    text-align: right;
    display: inline-block;
    margin-right: 40px;
}
.left-stats .single-stat {
    text-align: right;
}
.right-stats {
    display: inline-block;
}
.right-stats .single-stat {
    text-align: left;
}
.single-stat {
    margin-bottom: 20px;
}
.number {
    font: 60px"Bebas Neue";
    font-weight: bold;
    margin-bottom: -5px;
}

<div class="container">
    <h3>Header</h3>
    
    <div class="stats">
        <div class="left-stats">
            <div class="single-stat">
                <div class="number">1,200</div>
                <div class="desc">Staff on campus supported</div>
            </div>
            <div class="single-stat">
                <div class="number">10</div>
                <div class="desc">Departments reached</div>
            </div>
        </div>
        <div class="right-stats">
            <div class="single-stat">
                <div class="number">06</div>
                <div class="desc">Different home states/countries</div>
            </div>
            <div class="single-stat">
                <div class="number">10</div>
                <div class="desc">People who love food and technology</div>
            </div>
        </div>
    </div>
</div>

马克·奥德（Marc Audet）

我有一个使用您的HTML而display: table-cell不是的解决方案display: inline-block。我没有在列之间留出40px的空白，而是在相关元素中添加了20px的左/右填充。

请注意，出于演示目的，我添加了虚线的蓝色边框，可以将其删除。

.container {
  text-align: center;
}
.stats {
  display: table;
  width: 100%;
  margin: 0 auto 30px auto;
  border: 1px dotted blue;
}
.left-stats {
  text-align: right;
  display: table-cell;
  width: 50%;
  padding-right: 20px;
  border: 1px dotted blue;
}
.left-stats .single-stat {
  text-align: right;
}
.right-stats {
  display: table-cell;
  width: 50%;
  padding-left: 20px;
  border: 1px dotted blue;
}
.right-stats .single-stat {
  text-align: left;
}
.single-stat {
  margin-bottom: 20px;
}
.number {
  font: 60px"Bebas Neue";
  font-weight: bold;
  margin-bottom: -5px;
}

<div class="container">
  <h3>Header</h3>

  <div class="stats">
    <div class="left-stats">
      <div class="single-stat">
        <div class="number">1,200</div>
        <div class="desc">Staff on campus supported</div>
      </div>
      <div class="single-stat">
        <div class="number">10</div>
        <div class="desc">Departments reached</div>
      </div>
    </div>
    <div class="right-stats">
      <div class="single-stat">
        <div class="number">06</div>
        <div class="desc">Different home states/countries</div>
      </div>
      <div class="single-stat">
        <div class="number">10</div>
        <div class="desc">People who love food and technology</div>
      </div>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。