如何在弹性框中将一个元素的中心与另一个元素的基线对齐

Posted 2023-03-05

【中文标题】如何在弹性框中将一个元素的中心与另一个元素的基线对齐

【英文标题】：How to align center of one element with baseline of another in a flexbox

【发布时间】：2020-06-05 07:48:12

【问题描述】：

一个简单的问题：如何将一个元素的中心与另一个元素的基线对齐？这是一个例子：

span 
  display: flex;
  align-items: center;


svg 
  width: 100px;
  height: 100px;

<span>
            <svg version="1.1"
                 baseProfile="full"
                 viewBox="0 0 300 300"
                 xmlns="http://www.w3.org/2000/svg">

                <rect x=0 y=0   fill="red" />

                <circle cx="150" cy="150" r="80" fill="green" />

                <line x1="0" y1="150" x2="300" y2="150" stroke="black"/>

            </svg>

            <i>Something good text</i>
</span>

我希望 svg 的中心（由黑线标记）与文本的基线对齐。当然，使用硬编码的负边距或其他固定像素偏移量也可以做到这一点，但我想避免这种情况。

【问题讨论】：

问题在于 SVG 的基线是它的底部边缘而不是文本，所以从技术上讲，浏览器无法识别您正在定义的基线

您能告诉我们更多有关限制的信息吗？什么是已知/固定变量？你知道SVG的高度吗？您的文本可以是多行还是总是单行？ ...

文本是单行，SVG的高度是已知的。当然，如果有未知高度的解决方案，我也会感兴趣。

@Temani Afif：我不是在询问 svg 的基线。我想将 svg 的中心与“Something good text”文本的基线对齐，该文本具有定义的基线

并且该文本是手动放置（使用 x/y）在 SVG 内，因此无法从外部知道手动位置（您想要的基线），因为它不会定义基线SVG 之类的文本可以与其他元素一起使用。这就是为什么我说问题在于 SVG 的基线是它的底部边缘而不是文本

【参考方案1】：

这个不需要flexbox：

svg 
  width: 100px;
  height: 100px;
  vertical-align: middle;


i 
  display: inline-block;
  transform: translateY(-0.5ex);

<svg version="1.1"
                 baseProfile="full"
                 viewBox="0 0 300 300"
                 xmlns="http://www.w3.org/2000/svg">
     <rect x=0 y=0   fill="red" />
     <circle cx="150" cy="150" r="80" fill="green" />
     <line x1="0" y1="150" x2="300" y2="150" stroke="black"/>
</svg>
<i>Something good text</i>

中间

将元素的中间与基线加上父元素的一半x高度对齐。 ^ref

所以我用减去 x 高度的一半

来纠正 x 高度的一半