将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的默认值为baseline。

vertical-align: text-bottom也可以。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;