Can I use vertical align to position text at the bottom of an ancestor element?

Question

Can I use vertical-align (I realise this only applied to text - but I want to align text (albeit within a nested element)) to position the text in the following DOM at the bottom of an ancestor element?

I know how to do it with position: absolute, but can it be done with vertical-align?

The span inside the h1 is needed for a text-background effect.

#bar {
  background-color: rgb(236 , 154, 46 );
  vertical-align: middle;
  display: inline;
}

h1 {
  font-size: 2.6rem;
  line-height: 2.8rem;
  text-transform: uppercase;
}

#foo {
  background: url(https://d3i6fh83elv35t.cloudfront.net/newshour/wp-content/uploads/2017/07/scaramucci-1-1024x703.jpg);
  background-size: cover;
  min-height: 400px;
}

<header id="foo">
  <h1>
    <span id="bar">i want this aligned to the bottom of the header</span>
  </h1>
</header>

Possible duplicate of [Vertically align text in a div](https://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) — Salketer, Aug 04 '17 at 14:25
You can align any element using `vertical-align`, the common way would be to define a 100% parent height line-height using a pseudolement (which sets the flow for other children) and then use `inline-block`s and `vertical-align` to move align child elements over the whole parent area. — zrooda, Aug 04 '17 at 14:31
Here is a sample of the methodology using `inline-block` and `vertical-align` to position elements inside parents. https://web.archive.org/web/20160326133434/http://mystrd.at/tough-fucker-the-ultimate-css2-vertical-centering-monster/ — zrooda, Aug 04 '17 at 14:38
Here is a grid system I wrote some time ago that uses this methodology as a universal grid-like wrapper. https://github.com/salsita/wrapperElement — zrooda, Aug 04 '17 at 14:39

Salketer · Accepted Answer · 2017-08-04T14:38:50.130

#bar {
  background-color: rgb(236 , 154, 46 );
  vertical-align: middle;
  display: inline;
}

h1 {
  font-size: 2.6rem;
  line-height: 2.8rem;
  text-transform: uppercase;
  display:table-cell;
  vertical-align:bottom;
}

#foo {
  background: url(https://d3i6fh83elv35t.cloudfront.net/newshour/wp-content/uploads/2017/07/scaramucci-1-1024x703.jpg);
  background-size: cover;
  min-height: 400px;
  display:table;
}

<header id="foo">
  <h1>
    <span id="bar">i want this aligned to the bottom of the header</span>
  </h1>
</header>

Here, common technique is to use display:table and display:table-cell it allows for vertical alignement... There is another technique discussed in the questions you duplicated.

EDIT: This will allow you to not use table-cell as asked. The trick is to align to an element that has 100% height. Which means you need set height for parent. I've set font-size to 0 to prevent gaps.

#bar {
  background-color: rgb(236 , 154, 46 );
  vertical-align: middle;
  display: inline;
  
}

h1 {
  font-size: 2.6rem;
  line-height: 2.8rem;
  text-transform: uppercase;
  display:inline-table;
  width:99.999%;
  vertical-align:bottom;
}

#foo {
font-size: 0;
  background: url(https://d3i6fh83elv35t.cloudfront.net/newshour/wp-content/uploads/2017/07/scaramucci-1-1024x703.jpg);
  background-size: cover;
  min-height: 400px;
  height:400px;
}
#foo::before{
content:"";
max-width:0.001%;
vertical-align:bottom;
height:100%;
display:inline-block;
}

<header id="foo">
  <h1>
    <span id="bar">i want this aligned to the bottom of the header</span>
  </h1>
</header>

Thank you. Is there a way without using display table cell? Surely if the h1 is aligned to the bottom of the header it should appear at the bottom - but I cannot get that to work... — Ben Aston, Aug 04 '17 at 14:29

Can I use vertical align to position text at the bottom of an ancestor element?

1 Answers1