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