CODEWITHSUNDEEP
htmlcss
whatzi77
whatzi77

Reputation: 75

Vertically align 2 different font sizes to the bottom

I've set the parent as a table and children as table cells and vertically aligned to the bottom. Yet still it's showing larger font as it would be aligned to the middle

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

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

Upvotes: 3

Views: 3762

Answers (1)

Weafs.py
Weafs.py

Reputation: 22998

Use vertical-align: baseline instead or you could completely remove the vertical-align property, since the default value of vertical-align is baseline.

vertical-align: text-bottom will also work.

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

Upvotes: 3

Related Questions