如何垂直对齐文本(浮动)到底部

Question

我目前有这个结果:

但它应该是这样的:

m和s应该与底部对齐.

我的代码:

.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小提琴:http://jsfiddle.net/zmads0rp/1/

Answer 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或是通过消除实际空间,减少了在HTML小号font-size的timer-centered要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>