Проблема с вертикальным выравниванием внутри гибкого элемента - PullRequest
Новая
       26

Проблема с вертикальным выравниванием внутри гибкого элемента

0 голосов
/ 12 мая 2019

Я пишу код для создания адаптивного веб-сайта с использованием начальной загрузки.У меня проблема, которая отнимает много времени, и я не могу ее исправить.У меня есть этот код: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="home">
    <div class="container-fluid" style="background: rgba(234, 234, 234)">
        <div class="d-flex w-100">
            <div class="d-flex col justify-content-start" style="background:blue">
                <p>Logo</p>
            </div>
            <div class="d-flex col justify-content-center" style="background:red">
                <p>Info</p>
            </div>
            <div class="d-flex col justify-content-end" style="background:green">
                <p>Login</p>
            </div>
        </div>
    </div>
</div>

Я хочу выровнять текст по вертикали, чтобы он всегда был по центру, даже если, например, я изменил размер страницы для мобильных устройств.Я много чего пробовал, но не могу.

1 Ответ

0 голосов
/ 12 мая 2019 
class "align-items-center" is what you needed.


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="home">
  <div class="container-fluid" style="background: rgba(234, 234, 234)">
    <div class="d-flex justify-content-center align-items-stretch">
      <div class="col d-flex justify-content-center align-items-center" style="background:blue">
        <p>Logo</p>
      </div>
      <div class="col d-flex justify-content-center align-items-center" style="background:red">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      </div>
      <div class="col d-flex justify-content-center align-items-center" style="background:green">
        <p>Login</p>
      </div>
    </div>
  </div>
</div>
...