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

问题描述 投票:1回答:1

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

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的中心(用黑线标记)与文本的基线对齐。当然,使用硬编码的负边距或其他固定的像素偏移可能会做到这一点,但我想避免这种情况。

html css flexbox alignment
1个回答
0
投票

不需要为此使用flexbox:

svg {
  width: 100px;
  height: 100px;
  vertical-align:middle;
}
i {
  display:inline-block;
  transform:translateY(-0.5ex);
}
<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>

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

所以我用减号x-height的一半]进行翻译来纠正x-h的一半

© www.soinside.com 2019 - 2024. All rights reserved.