Question

我有一组如下所示样式的统计数据，但是如果我想将该组居中，它将使用延伸过去并具有更大宽度的描述的宽度。什么是根据统计数字的宽度居中的最简单方法，并且仍然有下面的描述？

.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>

Answer 1

你的意思是这样的吗？

.number {
font: 60px"Bebas Neue";
font-weight: bold;
margin-bottom: -5px;
text-align: center;
}

Answer 2

我有一个使用您的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>

根据具有较大宽度的兄弟元素的中心

2 个答案: