如何垂直对齐文本（浮动）到底部

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
• 删除HTML中的span之间的空白，删除实际空格，将font-size timer-centered缩减为0或使用评论技巧

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用display: table-cell并从float: left移除.right-timer-area > span.timer-centered span：

＆＃13;

＆＃13;

.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: table-cell;/*change to table-cell*/
  line-height: 1;
  vertical-align: bottom;
}
.right-timer-area .timer-sm {
  font-size: 16px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以这样试试 -

＆＃13;

＆＃13;

.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;
  display: table;
}
.right-timer-area > span.timer-centered {
  height: 36px;
  display: inline-block;
  vertical-align: middle;
  display: table-row;

}
.right-timer-area > span.timer-centered span {
  display: inline-block;
  /*float: left;*/
  line-height: 1;
  vertical-align: bottom;
  display: table-cell;
}
.right-timer-area .timer-sm {
  font-size: 16px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我希望它会对你有所帮助。