CODEWITHSUNDEEP
css
Brandon
Brandon

Reputation: 1195

Why isn't vertical-align: text-bottom working?

I can't get text-bottom to work properly. From what I'm reading the div should be aligned by the bottom of the text, however it's aligning it on the bottom as if its being aligned by "bottom".

div {
  display: inline-block;
  vertical-align: text-bottom; //same as bottom
  text-align: center;
  text-decoration: underline;
}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
}
<div>hello</div>
<div>world</div>

Upvotes: 1

Views: 1125

Answers (2)

Facundo Corradini
Facundo Corradini

Reputation: 3913

Text-align is meant to align items with the parent's text, not the sibling's

main{
}

div {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
  vertical-align: text-bottom;

}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
}
<main>
  Text
  <div>hello</div>
  <div>world</div>
</main>

You can still get away with it if only set it on one of them instead of both though

div {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
  vertical-align: text-bottom; 
}
<div>hello</div>
<div>world</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67738

"should be aligned by the bottom of the text..." - that's vertical-align: baseline, which is the default setting for inline-blocks, so you can simply erase that property completely, and the DIVs will align along their lowest text lines:

div {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
}
<div>hello</div>
<div>world</div>

Upvotes: 3

Related Questions