Выравнивание растягивания основания гибкого блока с текстом по центру - PullRequest
Новая
       11

Выравнивание растягивания основания гибкого блока с текстом по центру

0 голосов
/ 10 апреля 2019

Я делал урок здесь: https://scotch.io/tutorials/get-to-know-the-flexbox-grid-in-foundation-6 и пробовал растянуть здесь:

https://codepen.io/chrisoncode/pen/wMWEVE

    <p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
    <div class="columns">space</div>
    <div class="columns">
      <p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
    </div>
</div>

body          { padding-top:50px; }
.row          { border:1px solid #FF556C; margin-bottom:20px; }
.columns      { background:#048CB9; color:#FFF; padding:20px; }
.columns:first-child { background:#085A78;vertical-align:bottom }
.columns:last-child  { background:#B3BBBB; }

В третьем примере, используя свойство stretch, я пытаюсь получить текст для выравнивания по вертикали посередине, и мне не везет. Может кто-нибудь сказать мне, как это сделать?

Я пытался добавить .columns: first-child {background: # 085A78; выровнять по вертикали: bottom}, но это не сработало.

Ответы [ 2 ]

1 голос
/ 11 апреля 2019

HTML: 

<p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
  <div class="columns">
    <div class="row align-center text-center"><p>space</p></div>
  </div>
  <div class="columns">
    <p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
  </div>
</div>

CSS: 

div.row.align-stretch.text-center .columns {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.row.align-stretch.text-center .columns p {
  margin: 0;
}
0 голосов
/ 11 апреля 2019

Дочерние элементы Flex по умолчанию равны по высоте, если только вы не назначите значение элементов выравнивания, отличное от растяжения.

Для этого: 

<div class="row align-stretch text-center">

То же, что и: 

<div class="row text-center">

Для вашего примера самый простой способ - использовать .align-middle, который сделает столбец высотой содержимого внутри и вертикально отцентрирует его к более высокому столбцу в группе.

Example from your codepen

В противном случае вы можете сделать сам столбец display: flex; и добавить align-items: center;

...