如何将垂直浮动的跨度文本对齐到底部

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

- brabertaser19

---

你可以尝试使用下标标签。 - Arun Kumar M

请查看我的回答，先生。 - Ivin Raj

为什么你不使用 sub 标签？ - Mukul Kant

@Maddy sub没有将元素直接定位在底部一行。 - brabertaser19

请检查一下我的答案，先生 @brabertaser1992 - Ivin Raj

Answer 1

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

• 从 .right-timer-area > span.timer-centered span 中删除 float: left;
• 将 .right-timer-area .timer-sm 更改为 .right-timer-area > span.timer-centered .timer-sm，使其更具体。这确保它覆盖了在 .right-timer-area > span.timer-centered span 中设置的规则。
• 向 .right-timer-area > span.timer-centered .timer-sm 添加 vertical-align: sub;
• 通过删除实际空格、将 timer-centered 的 font-size 减小到 0 或使用注释技巧来删除 HTML 中 span 之间的空格

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

- Hidden Hobbes

---

在我的代码中，我无法删除空格并且会得到额外的空格，这就是为什么我使用浮点数的原因。 - brabertaser19

@brabertaser1992，我添加了一些额外的方法，你可以使用它们来去除空格。希望至少有一个对你有用！ - Hidden Hobbes

Answer 2

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

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

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

- Alex Char

Answer 3

你可以尝试像这样 -

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

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

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

- Mukul Kant

---

m和s不在同一行 - brabertaser19