Вертикальное выравнивание текста в Bootstrap 4 divs (с классом btn) без фиксированной высоты при использовании CSS Grid (и без flexbox) - PullRequest
Новая
       29

Вертикальное выравнивание текста в Bootstrap 4 divs (с классом btn) без фиксированной высоты при использовании CSS Grid (и без flexbox)

2 голосов
/ 10 марта 2019

У меня есть CSS Grid с Bootstrap 4 div с тегами btn.Дивы расширяются (растягиваются) вертикально.Мне просто нужно выровнять текст по центру.

Я знаю, что могу использовать flexbox, но в этом проекте я не могу.

enter image description here

Вот пример: https://jsfiddle.net/fredhors/0sw2uLay/5/

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-wrapper">
  <div class="btn btn-primary">Content A</div>
  <div class="btn btn-warning">Content B</div>
  <div class="btn btn-danger">Content C</div>
  <div class="btn btn-success">Content D</div>
</div>

1 Ответ

1 голос
/ 10 марта 2019

Если вам нужно центрировать все btn, просто используйте align-items: center на grid-wrapper - см. Демонстрацию ниже: 

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;
  align-items: center; /* center vertically */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-wrapper">
  <div class="btn btn-primary">Content A</div>
  <div class="btn btn-warning">Content B</div>
  <div class="btn btn-danger">Content C</div>
  <div class="btn btn-success">Content D</div>
</div>

Если вы хотите, чтобы фон растягивался и имел вертикальное выравнивание , будет проще, если вы будете использовать flexbox дляbtn - см. Демонстрацию ниже: 

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;
}

.grid-wrapper > .btn {
  display: flex;
  align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-wrapper">
  <div class="btn btn-primary">Content A</div>
  <div class="btn btn-warning">Content B</div>
  <div class="btn btn-danger">Content C</div>
  <div class="btn btn-success">Content D</div>
</div>

Я знаю, что могу использовать flexbox, но в этом проекте я не могу.

Если выдля этого нельзя использовать flexbox, вы можете использовать псевдоэлемент , который будет центрировать текст в элементах сетки - см. демонстрацию ниже: 

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;
}

.grid-wrapper .btn:after {
  display: inline-block;
  vertical-align: middle;
  content: '';
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-wrapper">
  <div class="btn btn-primary">Content A</div>
  <div class="btn btn-warning">Content B</div>
  <div class="btn btn-danger">Content C</div>
  <div class="btn btn-success">Content D</div>
</div>
...