html - 如何将 flexbox 中一个元素的中心与另一个元素的基线对齐

Question

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

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 width="300" height="300" 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 的中心(由黑线标记)与文本的基线对齐。当然，可以使用硬编码的负边距或其他固定像素偏移来实现这一点，但我想避免这种情况。

Answer 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 width="300" height="300" 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>

middle

Aligns the middle of the element with the baseline plus half the x-height of the parent. ^ref

因此，我通过使用减x 高度的一半进行翻译来纠正加一半的x高度