Как центрировать элементы в div без потери высоты родителя? - PullRequest
Новая
       25

Как центрировать элементы в div без потери высоты родителя?

2 голосов
/ 28 мая 2020

У меня есть контейнер div с двумя пролетами внутри. Когда я пытаюсь align-items: center, я теряю height и border-radius пролетов. Я бы хотел, чтобы они сохранили свою высоту и радиус границы, просто центрировавшись. Как я могу это сделать?

CSS родительского div: 

const Container = styled.div`
  display: inline-flex;
  overflow: hidden;
  border-radius: 4px;
  margin: 0px 8px 10px 8px;
  height: 70px;
`;

CSS дочернего диапазона: 

const TextContainer = styled.span`
  padding: 8px 11px;
`;

До align-items: center: enter image description here

После align-items: center: After align center

Ответы [ 2 ]

5 голосов
/ 28 мая 2020

Вы можете добавить display: flex к span и выровнять элементы. 

.container {
  display: inline-flex;
  overflow: hidden;
  border-radius: 4px;
  margin: 0px 8px 10px 8px;
  height: 70px;
}

span {
  display: flex;
  padding: 8px 11px;
  background: #f00;
  align-items: center;
}
<div class="container">
  <span>Match Rank</span>
  <span>
  <img src="https://i.picsum.photos/id/83/60/50.jpg" />
  </span>
</div>
1 голос
/ 28 мая 2020

Это на самом деле из-за inline-flex установки вертикального выравнивания базовой линии.

Удаление align-items изменит его на stretch, но вы, вероятно, не захотите этого делать.

РЕШЕНИЕ1

Что произойдет, если вы используете align-items: flex-start

РЕШЕНИЕ2

Или вы можете попробовать установить выравнивание вершины по верху, это может исправить это. 

const TextContainer = styled.span`
    vertical-align: top;
    padding: 8px 11px;
`;

Можете ли вы попробовать их и сообщить мне, как это получается? Спасибо

...