vertical-align：在div中忽略middle属性

Question

我有一些div包含一个数字（更大的字体）和一个标签（更小的字体）。 我试图得到的结果如下：

然而，数字和标签之间仍有很大的空间：

......这似乎来自于文本在其父div的中间没有垂直对齐的事实：

...虽然在这个类的CSS中我说要将它对齐在中间：

.boxText {
  text-align: center;
  vertical-align: middle;
}

我的想法已经不多了，有人可以帮助我们更接近数字和标签吗？您可以在on this fiddle周围播放，然后重现问题。

Answer 1

盒子文字的高度取决于他的parrent

.summary {
  height: 75px;
}

.summaryBoxes {
  height: 55px;
}

这是您应该更改的元素，以便您可以更改其子女的外观。

＆＃13;

＆＃13;

.left-column {
  float: left;
  margin-right: 5px;
  margin-left: 10px;
  width: 33%;
}

.page {
  margin: 1.2rem;
}

.summary {
  border: 1px solid gray;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
  width: 80%;
  white-space: nowrap;
  height: 75px;
}

.summaryBoxes {
  display: inline-block;
  height: 55px;
  margin-left: 10px;
  margin-top: 10px;
}

.summaryErrors {
  border: 1px solid #4d94ff;
  color: #4d94ff;
}

.summaryRetries {
  border: 1px solid black;
}

.summarySmallBoxes {
  width: 100px;
}

.summaryBoxes {
  display: inline-block;
  height: 55px;
  margin-left: 10px;
  margin-top: 10px;
}

.boxText {
  text-align: center;
  vertical-align: middle;
}

.counters {
  font-size: 35px;
  font-weight: bold;
}

＆＃13;

<div class="summary">
  <div class="summaryBoxes summarySmallBoxes summaryErrors boxText">
    <div class="counters" style="height:70%;">
      5
    </div>
    <div style="height:30%;">
      errors
    </div>
  </div>
  <div class="summaryBoxes summarySmallBoxes summaryErrors boxText">
    <div class="counters" style="height:70%;">
      3
    </div>
    <div style="height:30%;">
      warnings
    </div>
  </div>
  <div class="summaryBoxes summarySmallBoxes summaryRetries boxText">
    <div class="counters" style="height:70%;">
      0
    </div>
    <div style="height:30%;">
      retries
    </div>
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这会有所帮助：）

Answer 2

另一种方法是删除额外的div并使用css中的内容，如：

https://jsfiddle.net/12Lz2wjc/1/

<div class="summary">
  <div class="summaryBoxes summarySmallBoxes summaryErrors boxText">
    <div class="counters">5</div>
  </div>
  <div class="summaryBoxes summarySmallBoxes summaryErrors boxText">
    <div class="counters">3</div>
  </div>
  <div class="summaryBoxes summarySmallBoxes summaryRetries boxText">
    <div class="counters">0</div>
  </div>
</div>

.left-column {
  float: left;
  margin-right: 5px;
  margin-left: 10px;
  width: 33%;
}

.page {
  margin: 1.2rem;
}

.summary {
  border: 1px solid gray;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
  width: 80%;
  white-space: nowrap;
  height: 105px;
}

.summaryErrors {
  border: 1px solid #4d94ff;
  color: #4d94ff;
}

.summaryRetries {
  border: 1px solid black;
}

.summarySmallBoxes {
  width: 100px;
}

.summaryBoxes {
  display: inline-block;
  height: 85px;
  margin-left: 10px;
  margin-top: 10px;
}

.boxText {
  text-align: center;
  vertical-align: middle;
}

.counters {
  font-size: 35px;
  font-weight: bold;
  margin: 22px auto;
  line-height: 15px;
}

.summaryBoxes:nth-child(1) .counters::after{
  content: "\A errors";
  font-size: 18px;
  white-space: pre;
}

.summaryBoxes:nth-child(2) .counters::after{
  content: "\A warnings";
  font-size: 18px;
  white-space: pre;
}

.summaryBoxes:nth-child(3) .counters::after{
  content: "\A retries";
  font-size: 18px;
  white-space: pre;
}