引导程序中的垂直对齐中心 [英] Vertical Align Center in Bootstrap
问题描述
我正在尝试使用Bootstrap 4将Container放在页面中间.到目前为止，我一直没有成功.任何帮助将不胜感激.
我已经在
由于Bootstrap 4 .row 现在是 display:flex ，因此您可以在任何列上简单地使用 align-self-center 将其垂直居中...
< div class ="row">< div class ="col-6 align-self-center"< div class =卡卡块">中心</div></div>< div class ="col-6">< div class =卡卡-反向卡-危险">更高</div></div></div> ，或者在整个 .row 上使用 align-items-center 垂直居中对齐行中的所有 col-* .
< div class ="row align-items-center">< div class ="col-6">< div class =卡卡块">中心</div></div>< div class ="col-6">< div class =卡卡-反向卡-危险">更高</div></div></div> 3-使用显示实用程序的垂直居中:
Bootstrap 4具有显示实用程序，可用于 更多示例 重要！ 我有提到身高吗? 记住垂直居中位置是相对于父元素的高度.如果您想在整个页面上居中，大多数情况下，这应该是您的CSS ... 或在父/容器上使用 另请参阅: I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far. Any help would be appreciated. I have built it at Codepen.io so you guys can play with it and let me know what works as I am about out of ideas...
Important! Vertical center is relative to the height of the parent If the parent of the element you're trying to center has no defined
height, none of the vertical centering solutions will work! Now, onto vertical centering... Bootstrap 5 Beta (Updated 2021) Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4. For example align-items-center and justify-content-center can used on the flexbox parent ( Bootstrap 4 You can use the new flexbox & size utilities to make the Option 1 https://codeply.com/go/fFqaDe5Oey Option 2 https://codeply.com/go/BumdFnmLuk Option 3 https://codeply.com/go/3gySSEe7nd More on Bootstrap 4 Vertical Centering Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical
alignment. http://www.codeply.com/go/WG15ZWC4lf 1 - Vertical Center Using Auto Margins: Another way to vertically center is to use Vertical Center Using Auto Margins Demo
2 - Vertical Center with Flexbox: Since Bootstrap 4 or, use Vertical Center Different Height Columns Demo See this Q/A to center, but maintain equal height 3 - Vertical Center Using Display Utils: Bootstrap 4 has display utils that can be used for Vertical Center Using Display Utils Demo More examples Important! Did I mention height? Remember vertical centering is relative to the height of the parent element. If you want to center on the entire page, in most cases, this should be your CSS... Or use Also see: 这篇关于引导程序中的垂直对齐中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！display:table ， display:table-cell ， display:inline 等.这些可与
< div>
中的垂直中心图像 .container中的垂直中心.row
< div>
父母内部垂直居中的孩子
垂直中心全屏超大屏幕
body，html {高度:100％;} min-height:100vh (在Bootstrap 4.1+中为 min-vh-100 ).如果要将子元素居中放置在父元素内部.父级必须具有定义的高度.
引导4中的垂直对齐
Bootstrap 4中心垂直和水平对齐 var currentAuthor = "";
var currentQuote = "";
function randomQuote() {
$.ajax({
url: "https://api.forismatic.com/api/1.0/?",
dataType: "jsonp",
data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
success: function( response ) {
$("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
$("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
currentAuthor = response.quoteAuthor;
currentQuote = response.quoteText
}
});
}
function openURL(url){
window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}
function tweetQuote(){
openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}
$(document).ready(function () {
randomQuote();
$("#get-another-quote-button").click(function(){
randomQuote();
});
$('#tweet').on('click', function() {
tweetQuote();
});
});html, body {
background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
background-color: #17234E;
margin-bottom: 0;
min-height: 30%;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
.btn-new-quote {
color: #0C0C0D;
background-color: transparent;
border-color: #414147;
}
.btn-new-quote:hover {
color: #0C0C0D;
background-color: #9A989E;
border-color: #0C0C0D;
}
#tweet {
color: RGB(100, 100, 100);
}
#tweet:hover {
color: RGB(50, 50, 50);
}
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
opacity: .85;
border-color: RGB(50, 50, 50);
padding-bottom: 8px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center align-self-center">
<div class="col-sm-6">
<div class="jumbotron vertical-center text-center">
<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
<p id="quote-author" class="lead"><em></em></p>
<hr class="my-2">
<div class="row align-items-center justify-content-between">
<div class="col-sm-1-4 text-left">
<a id="tweet" href="#">
<h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
</a>
</div>
<div class="col-sm-1-4 text-right">
<button id="get-another-quote-button" type="button" class="btn btn-outline-secondary btn-new-quote">Don't Quote Me on This...</button>
</div>
</div>
</div>
</div>
</div>
</div>
row or d-flex). https://codeply.com/p/0VM5MJ7Hadcontainer full-height and display: flex. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).align-self-center on flexbox child<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
align-items-center on flexbox parent (.row is display:flex; flex-direction:row)<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
</div>
justify-content-center on flexbox parent (.card is display:flex;flex-direction:column)<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
my-auto represents margins on the vertical y-axis and is equivalent to:margin-top: auto;
margin-bottom: auto;
.row is now display:flex you can simply use align-self-center on any column to vertically center it... <div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
align-items-center on the entire .row to vertically center align all col-* in the row... <div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Vertical center image in <div>
Vertical center .row in .container
Vertical center and bottom in <div>
Vertical center child inside parent
Vertical center full screen jumbotron
body,html {
height: 100%;
}
min-height: 100vh (min-vh-100 in Bootstrap 4.1+) on the parent/container. If you want to center a child element inside the parent. The parent must have a defined height.
Vertical alignment in bootstrap 4
Bootstrap 4 Center Vertical and Horizontal Alignment
