一个简单的问题:如何将一个元素的中心与另一个元素的基线对齐?这是一个例子:
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的中心(用黑线标记)与文本的基线对齐。当然,使用硬编码的负边距或其他固定的像素偏移可能会做到这一点,但我想避免这种情况。
不需要为此使用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的一半