将 child 元素的底部与 parent 的基线对齐

Question

我想在弹性框（或文本框）中垂直对齐 child 元素，使其底部与其兄弟项的基线重合。

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

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

我可以使用

而不是来达到同样的效果吗？

稍后编辑：我附上了一个片段。我希望最后一个 child 的底部边框与图像的底部边框重合（其余 children 的 baseline）。我不希望所有内容都与底部对齐。

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

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

Answer 1

我创建了一个最简单的示例。

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

Answer 2

所以对于你的问题我还没有找到很好的解决方案，但是我把我试过的给你，也许它会给你一些想法。

显然，使用 flexbox 的基线对齐仅根据需要对齐文本内容，而不是 div 本身。

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

但是空的 div 会在基线上对齐吗？

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

我已经尝试过绝对定位的解决方案，但是你被迫定义父级的大小，这不是一个好的解决方案...

我认为，我找到的最佳解决方案是将文本与 flexbox 对齐，然后使用填充的大小转换块...希望对您有所帮助...

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

另一种解决方案是将所有内容与 flex-end 对齐，以便每个子项都在底部对齐，但我想这不是您已经说过的那样。

Answer 3

最后，我找到了解决办法:)它隐藏在CSS规范的某处：

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.

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

所以，为了将其 baseline 移动到 bottom margin 边缘， 你只需要添加 display: inline-block 和overflow: hidden（或 'visible' 以外的任何内容，例如：'auto'）到子元素：

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>

将 child 元素的底部与 parent 的基线对齐

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

css

vertical-alignment

baseline