Как вертикально центрировать содержимое в теле с помощью начальной загрузки 4 - PullRequest
Новая
       66

Как вертикально центрировать содержимое в теле с помощью начальной загрузки 4

0 голосов
/ 21 октября 2018

Я пытаюсь выровнять класс контейнера с жидкостью контейнера в середине экрана по горизонтали и вертикали.Я пробовал много классов, которые должны были работать с начальной загрузкой, но это не так.Буду признателен за вашу помощь! 

<body>
<div class="container align-items-center justify-content-center">
    <div class="row justify-content-center">
        <div class="col-10 text-center" >
            <h1 style="font-size:40pt;">Site in constructie</h1>
            <p>Ceva fain este in constructie!<br>
                Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>
        </div>
        <div class="col-10 col-md-6 py-5">
            <form id="subscribeForLaunch" class="input-group">
                <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
                <button class="btn btn-info" onclick="subscribeRelease(); return false;">Submit!</button>
            </form>
        </div>  
    </div>
</div>

Ответы [ 3 ]

0 голосов
/ 21 октября 2018

Сначала убедитесь, что body / html / container занимает полную высоту (вы можете использовать класс h-100), а затем добавьте align-self-center к контенту, который вы хотите центрировать: 

body,html {
  height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid h-100 justify-content-center">
    <div class="row justify-content-center align-middle h-100">
        <div class="col-10 text-center align-self-center">
            <h1 style="font-size:40pt;">Site in constructie</h1>
            <p>Ceva fain este in constructie!<br>
                Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>
        
          <form id="subscribeForLaunch" class="form-inline justify-content-center">
              <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
              <button class="btn btn-info" onclick="subscribeRelease(); return false;">Submit!</button>
          </form>
       </div>
    </div>
</div>
0 голосов
/ 21 октября 2018

Попробуйте это 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
 
<div class="container align-items-center justify-content-center">
    <div class="row justify-content-center">
        <div class="col-10 text-center" >
            <h1 style="font-size:40pt;">Site in constructie</h1>
            <p>Ceva fain este in constructie!<br>
                Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>

            <form id="subscribeForLaunch" class="input-group container pr-5">
                <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
                <button class="btn btn-info pl-1" onclick="subscribeRelease(); return false;"> Submit! </button>
            </form>
        </div> 
    </div>
</div>

Или это 

       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
       
<div class="d-flex justify-content-center">
    <div class="row justify-content-center">
        <div class="col-10 text-center" >
            <h1 style="font-size:40pt;">Site in constructie</h1>
            <p>Ceva fain este in constructie!<br>
                Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>

            <form id="subscribeForLaunch" class="input-group container pr-5">
                <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
                <button class="btn btn-info pl-1" onclick="subscribeRelease(); return false;">Submit!</button>
            </form>
        </div> 
    </div>
</div>
0 голосов
/ 21 октября 2018

Чтобы сделать контейнер вертикально и горизонтально по центру, вам нужно сделать его родительский контейнер контейнером flexbox с свойствами align-items и justify-content в качестве центра.В своем коде вы можете дать контейнеру непосредственный родительский div с его высотой 100%, чтобы он принимал высоту тела. 

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
</head>

<body>
<div class="h-100 d-flex  align-items-center justify-content-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-10 text-center" >
                    <h1 style="font-size:40pt;">Site in constructie</h1>
                    <p>Ceva fain este in constructie!<br>
                        Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>
                </div>
                <div class="col-10 col-md-6 py-5">
                    <form id="subscribeForLaunch" class="input-group">
                        <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
                        <button class="btn btn-info" onclick="subscribeRelease(); return false;">Submit!</button>
                    </form>
                </div>  
            </div>
        </div>
  </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

Вы можете обратиться: https://dev.to/c0depanda/flexing-with-css-flexbox-1a2l https://getbootstrap.com/docs/4.0/utilities/flex/

...