将子元素的底部与父元素的基线对齐 [英] Align the bottom of a child element with the parent's baseline

问题描述

我想垂直对齐弹性框(或文本框)中的子元素，使其底部与其兄弟元素的基线重合.

默认情况下，图像会发生这种情况:

:

<块引用>

没有基线，因此当图像在带有 vertical-align:baseline 的内联格式上下文中使用时，图像的底部将放置在文本基线上.

我可以用 <div> 达到同样的效果吗?而不是 <img>?

稍后我附上了一个片段.我希望最后一个孩子的底部边框与图像的底部边框(其余孩子的基线)重合.我不希望所有东西都对齐到底部.

.parent {显示:弹性；对齐项目:基线；}.child2 {字体系列:等宽；字体大小:200%；}图像{边框底部:1px 纯红色；}.child-bottom {填充:5px；背景色:#fdd；边框底部:1px 纯红色；}

<span>这些</span><span class="child2">are</span><span>基线</span><img src="https://cdn.sstatic.net/Img/ico-binculars.svg?v=d4dbaac4eec9"><span>对齐.</span><div class="child-bottom">这个孩子的底部边框应该在父母的基线上.</div>

后期编辑2.一张图片是一千个字.希望它有助于澄清我需要什么样的对齐方式.注意字母 j、p 和 q 如何延伸到基线以下.

解决方案

终于找到了解决方案:)它隐藏在 CSS 规范中的某处:

<块引用>

'inline-block' 的基线是其最后一个行框的基线在正常流程中，除非它没有流入线框或如果它的溢出"属性具有除可见"之外的计算值，在在这种情况下，基线是底部边距边缘.

这取自 https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align，页面底部.

因此，为了将其基线移动到下边距边缘，您只需添加 display: inline-block 和 <代码>溢出:隐藏(或除可见"以外的任何内容，例如:自动")到子元素:

body {字体大小:200%；}.底部 {显示:内联块；/* <--- 这个 */溢出:隐藏；/* <--- 还有这个 */宽度:10rem；边框:2px纯橙色；填充:2rem；}

<span>text jklmnopqr</span><div class="bottom">底部在基线上的div</div>

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.

解决方案

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>

这篇关于将子元素的底部与父元素的基线对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！