html - 如何垂直对齐文本( float )到底部

我目前有这个结果:



但它看起来应该像这样:



和的应该与底部对齐。

我的代码:

.right-timer-area {
  width: 128px;
  height: 52px;
  line-height: 52px;
  font-size: 36px;
  font-weight: 300;
  color: #ffa000;
  float: right;
  margin: 0 50px 0 0;
}
.right-timer-area > span.timer-centered {
  height: 36px;
  display: inline-block;
  vertical-align: middle;
}
.right-timer-area > span.timer-centered span {
  display: inline-block;
  float: left;
  line-height: 1;
  vertical-align: bottom;
}
.right-timer-area .timer-sm {
  font-size: 16px;
}

<div class="right-timer-area">
  <span class="timer-centered">
    <span class="timer-big">15</span>
    <span class="timer-sm">m</span>
    <span>-</span>
    <span class="timer-big">45</span>
    <span class="timer-sm">s</span>
  </span>
</div>

但这没有用。是否有任何解决方法，而无需更改.right-timer-area(它位于其他div内部)和没有table-layout呢？
如果是，那怎么办？

JS fiddle :http://jsfiddle.net/zmads0rp/1/

最佳答案

您的问题是您已将float: left;添加到.right-timer-area > span.timer-centered span。这将覆盖display: inline-block;，这意味着vertical-align无效。为了获得所需的结果，请进行以下更改:

从float: left;删除.right-timer-area > span.timer-centered span

将.right-timer-area .timer-sm更改为.right-timer-area > span.timer-centered .timer-sm，使其更具体。这样可以确保它覆盖.right-timer-area > span.timer-centered span

中设置的规则

将vertical-align: sub;添加到.right-timer-area > span.timer-centered .timer-sm

通过删除实际空间，将span的font-size减少为timer-centered或使用注释技巧

来删除HTML中0之间的空格。

.right-timer-area {
  clear: right;
  width: 128px;
  height: 52px;
  line-height: 52px;
  font-size: 36px;
  font-weight: 300;
  color: #ffa000;
  float: right;
  margin: 0 50px 0 0;
}
.right-timer-area > span.timer-centered {
  height: 36px;
  display: inline-block;
  vertical-align: middle;
}
.right-timer-area > span.timer-centered span {
  display: inline-block;
  line-height: 1;
  vertical-align: bottom;
}
.right-timer-area > span.timer-centered .timer-sm {
  font-size: 16px;
  vertical-align: sub;
}
.right-timer-area .fontsize {
  font-size: 0;
}
.right-timer-area span.fontsize span {
  font-size: 36px;
  vertical-align: baseline;
}

<div class="right-timer-area">
  <span class="timer-centered">
    <span class="timer-big">15</span><span class="timer-sm">m</span><span>-</span><span class="timer-big">45</span><span class="timer-sm">s</span>
  </span>
</div>

<div class="right-timer-area">
  <span class="timer-centered fontsize">
    <span class="timer-big">15</span>
    <span class="timer-sm">m</span>
    <span>-</span>
    <span class="timer-big">45</span>
    <span class="timer-sm">s</span>
  </span>
</div>

<div class="right-timer-area">
  <span class="timer-centered">
    <span class="timer-big">15</span><!--
    --><span class="timer-sm">m</span><!--
    --><span>-</span><!--
    --><span class="timer-big">45</span><!--
    --><span class="timer-sm">s</span>
  </span>
</div>

关于html - 如何垂直对齐文本( float )到底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32761427/