Align the bottom of a child element with the parent's baseline

Question

I would like to vertically align a child element in a flex box (or text box) so that its bottom coincides with the baseline of its siblings.

This happens by default for images:

MDN <img> Element:

<img> has no baseline, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the text baseline.

Can I achieve the same effect with a <div> instead of an <img>?

Later edit: I'm attaching a snippet. I want the bottom border of the last child to coincide with the bottom border of the image (the baseline of the rest of the children). I don't want everything aligned to the bottom.

.parent {
    display: flex;
    align-items: baseline;
}

.child2 {
    font-family: monospace;
    font-size: 200%;
}

img {
    border-bottom: 1px solid red;
}

.child-bottom {
    padding: 5px;
    background-color: #fdd;
    border-bottom: 1px solid red;
}

<div class="parent">
    <span>These</span>
    <span class="child2">are</span>
    <span>baseline</span>
    <img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
    <span>aligned.</span>
    <div class="child-bottom">This child's bottom border should be on the baseline of the parent.</div>
</div>

Later edit 2. A picture is a thousand words. Hope it helps clarify what kind of alignment I need. Notice how letters j, p, and q extend below the baseline.

Ihram

Have you tried using Flexbox ? – Butterandeggs

of course I tried, also searched stackoverflow from top to bottom:) – Ihram

Answer 1

Finally, I found a solution:) It was hidden somewhere in the CSS specification:

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

This is taken from https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align, bottom of the page.

So, in order to move its baseline to the bottom margin edge, you only have to add display: inline-block and overflow: hidden (or anything other than 'visible', eg: 'auto') to the child element:

body {
    font-size: 200%;
}

.bottom {
    display: inline-block; /* <--- this */
    overflow: hidden; /* <--- and this */

    width: 10rem;
    border: 2px solid orange;
    padding: 2rem;
}

<div>
    <span>text jklmnopqr</span>
    <div class="bottom">div with bottom on the baseline</div>
</div>

Ihram

you're my hero here - a great question, and an obscure find to answer the question! – Thoron

Answer 2

So I have not found a good solution for your question, but I give you what I've tried, maybe it will give you some ideas.

Apparently, the baseline alignement with flexbox only align the text content as you want, not the div itself.

.parent {
    display: flex;
    align-items: last baseline;
}

.child2 {
    font-family: monospace;
    font-size: 200%;
}

img {
    border-bottom: 1px solid red;
}

.child-bottom {
    padding: 5px;
    background-color: #fdd;
    border-bottom: 1px solid red;
}

<div class="parent">
    <span>These</span>
    <span class="child2">are</span>
    <span>baseline</span>
    <img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
    <span>aligned.</span>
    <div class="child-bottom">This child's bottom border should be on the baseline of the parent.</div>
</div>

But an empty div will be aligned on baseline ?

.parent {
    display: flex;
    align-items: baseline;
}

.child2 {
    font-family: monospace;
    font-size: 200%;
}

img {
    border-bottom: 1px solid red;
}

.child-bottom {
    padding: 5px;
    width:50px;
    height:50px;
    background-color: #fdd;
    border-bottom: 1px solid red;
}

<div class="parent">
    <span>These</span>
    <span class="child2">are</span>
    <span>baseline</span>
    <img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
    <span>aligned.</span>
    <div class="child-bottom"></div>
</div>

I have tried solutions with absolute positionning, but you are forced to define the size of the parent, which is not a good solution...

The best solution I found is, I think, to align the text with flexbox, then translate the block with the size of your padding... I hope it helps you a little bit...

.parent {
    display: flex;
    align-items: last baseline;
}

.child2 {
    font-family: monospace;
    font-size: 200%;
}

img {
    border-bottom: 1px solid red;
}

.child-bottom {
    padding: 5px;
    background-color: #fdd;
    border-bottom: 1px solid red;
    transform:translateY(-10px);
}

<div class="parent">
    <span>These</span>
    <span class="child2">are</span>
    <span>baseline</span>
    <img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
    <span>aligned.</span>
    <div class="child-bottom">This child's bottom border should be on the baseline of the parent.</div>
</div>

Another solution would be to align everything with flex-end so that every child are aligned at bottom but I guess it is not what you want as you said already.

Butterandeggs

thanks for researching:) it's interesting that an empty div is aligned with its bottom on the baseline. i'll try to leverage that somehow. – Ihram

Answer 3

I created a simplest example.

.parent{
  display: inline-flex;
  flex-direction: row;
  align-items: flex-end

}
.child{
  background: red;
  color: white;
  width: 50px;
  height: fit-content
}

<div class='parent'>
  <div class='child'>some text</div>
  <div  class='child'>some more text</div>
  <div  class='child'>some more more more more more more more more text</div>
</div>

Goldfish

to learn more about flex:check flaviocopes.com/flexbox – Goldfish

sorry, but I only want one of the children to be aligned with its bottom on the same line as the rest of the children's baseline. you aligned everything at the bottom: that's not what I want. – Ihram

Thanks @Manon, I did my research, I know about "align-self", I'm not aware of any value for that property that answers my question. – Ihram