html - 将 2 种不同的字体大小垂直对齐到底部

Question

我已将父级设置为表格，将子级设置为表格单元格并垂直对齐到底部。然而它仍然显示更大的字体，因为它会与中间对齐

html

<div class="table">
  <div class="tablecell tablecell1">7.1</div>
  <div class="tablecell tablecell2">Inches</div>
</div>

CSS

.table {width:200px; display:table;}
.tablecell {display:table-cell; vertical-align:bottom;}
.tablecell1 {font-size:40px;}
.tablecell2 {padding-left:15px; font-size:20px;}

和jsfiddle http://jsfiddle.net/12qmna8y/

Answer 1

使用 vertical-align: baseline 代替，或者您可以完全删除 vertical-align 属性，因为 vertical-align 的默认值是基线。

vertical-align: text-bottom 也可以。

.table {
  width: 200px;
  display: table;
}
.tablecell {
  display: table-cell;
}
.tablecell1 {
  font-size: 40px;
}
.tablecell2 {
  padding-left: 15px;
  font-size: 20px;
}

<div class="table">
  <div class="tablecell tablecell1">7.1</div>
  <div class="tablecell tablecell2">Inches</div>
</div>