Как выровнять центр одного элемента с базовой линией другого во flexbox - PullRequest
Новая
       25

Как выровнять центр одного элемента с базовой линией другого во flexbox

2 голосов
/ 21 февраля 2020

Простой вопрос: как мне выровнять центр одного элемента с базовой линией другого? Вот пример: 

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 (отмеченный черной линией) был выровнен с базовой линией текста. Конечно, это возможно при наличии жестко заданных отрицательных полей или других фиксированных смещений пикселей, но я бы хотел этого избежать.

1 Ответ

2 голосов
/ 21 февраля 2020

Для этого не нужен 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

Выравнивает середину элемента с базовой линией плюс половину высоты x из родитель. ref

Поэтому я исправляю плюс половину высоты x с переводом, использующим минус половину x- высота

...