Question

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

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

没有基线，因此，当在带有vertical-align：基线的嵌入式格式化上下文中使用图像时，图像的底部将放置在文本基线上。

我可以用

代替达到相同的效果吗？

稍后编辑：：我要添加一个摘要。我希望最后一个孩子的底部边框与图像的底部边框（其余孩子的 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如何延伸到基线以下。

3 个答案:

答案 0 :(得分：1)

答案 1 :(得分：0)

答案 2 :(得分：-1)

Answer 1

因此，对于您的问题，我没有找到一个好的解决方案，但我会给您我尝试过的方法，也许它会给您一些想法。

显然，使用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 2

最后，我找到了一个解决方案：)它被隐藏在CSS规范中的某个地方：

“内联块”的基线是其最后一行框的基线正常流中，除非它没有流内线框或其“溢出”属性的计算值不是“可见”，在这种情况下，基线是底部边缘。

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

因此，要将其基线移动到下边距边缘，您只需添加display: inline-block和overflow: hidden（或其他任何内容）除了“可见”（例如：“自动”）以外的子元素：

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>

Answer 3

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

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

将子元素的底部与父元素的基线对齐

3 个答案: