Как вертикально центрировать контент в теле с помощью bootstrap 4
Я пытаюсь выровнять класс контейнера для жидкости в середине экрана как по горизонтали, так и по вертикали. Я пробовал много классов, которые должны были работать с бутстрапом, но они этого не сделали. Буду признателен за вашу помощь!
<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
Чтобы сделать контейнер по вертикали и горизонтали центрированным, вам нужно сделать его родительским контейнером 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-1a2lhttps://getbootstrap.com/docs/4.0/utilities/flex/
Я только что сделал то, что вы предложили, но это все еще не работает. :(
взгляните на измененный код. Если он по-прежнему не работает, убедитесь, что вы связали файлы начальной загрузки css / js и jquery в правильном порядке. Если все еще не работает, опубликуйте весь код (заголовок, скрипт и т. д.)
Сначала убедитесь, что 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>Также пробовал этот. Теперь я попробовал jsfiddle, и, похоже, он там работал, но не на моем веб-сайте. В чем может быть проблема?
вы скопировали, вставили html? у него есть некоторые другие модификации вашего исходного, например, я взял вашу форму и поместил ее в первый столбец (col-10), поскольку я не видел смысла иметь два столбца col-10
Да, я скопировал и вставил
перейдите в инструменты разработчика и убедитесь, что .row занимает всю высоту страницы
.row, .container-fluid, body {высота: 100%! important; } Это то, что я добавил в свою таблицу стилей, и все тот же
Так это 100%? 100% высота означает, что он займет 100% высоты родителей, и если этот родитель не на 100%, это не сработает. добавить HTML {height: 100%}
Попробуй это
<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>Скопированы оба, и они все еще не работают. :( он становится центрированным по горизонтали из-за выравнивания центра содержимого, но это все. Он остается вверху страницы.
Возможный дубликат Как центрировать выровнять контейнер по вертикали в бутстрапе