我正在尝试使用Bootstrap 4将Container放在页面的中心。到目前为止,我一直没有成功。任何帮助,将不胜感激。
我在Codepen.io建造了它,所以你们可以玩它,让我知道我的想法是什么...
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>
重要! 垂直中心相对于父级的[[高度
如果您要居中的元素的父元素未定义垂直居中解决方案的[[height,将起作用!现在,进入Bootstrap 4的垂直居中...您可以使用新的flexbox & size utilities使none
container
全高和display: flex
。这些选项不需要额外的CSS
(除了容器的高度(即:html,body)必须为100%)。
flexbox子项上的选项1align-self-center
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://www.codeply.com/go/fFqaDe5Oey
(flexbox父项上的选项2
align-items-center
.row
为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>
https://www.codeply.com/go/BumdFnmLukhttps://www.codeply.com/go/3gySSEe7ndFlexbox父项上的选项3
justify-content-center
(.card
为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>
有关Bootstrap 4垂直居中的更多信息
现在,Bootstrap 4提供了flexbox和other utilities,有很多方法可以实现垂直对准。 http://www.codeply.com/go/WG15ZWC4lf
1-使用自动页边距的垂直中心:
垂直居中的另一种方法是使用my-auto
。这将使元素在容器内居中。例如,h-100
使行全高,my-auto
将使col-sm-12
列垂直居中。
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertical Center Using Auto Margins Demo
[由于Bootstrap 4my-auto
代表垂直y轴上的边距,并且等效于:]]
margin-top: auto; margin-bottom: auto;
2-带Flexbox的垂直中心:
.row
现在为display:flex
,因此您可以在任何列上简单地使用align-self-center
将其垂直居中... <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
上使用.row
以垂直居中对齐该行中的所有col-*
...
<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>
See this Q/A to center, but maintain equal height
3-使用显示实用程序的垂直居中:
Bootstrap 4具有可用于display utils,display:table
,display:table-cell
等的display:inline
。这些可与vertical alignment utils一起使用以对齐内联,内联块或表格单元格元素。] ><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 Using Display Utils Demo
Vertical center image in更多示例
<div>
<div>
Vertical center .row in .containerVertical center and bottom in <div>
<div>
重要!
Vertical center child inside parent或在父/容器上使用Vertical center full screen jumbotron(在Bootstrap 4.1+中为body,html {
height: 100%;
}
)。如果要将子元素居中放置在父元素内部。父级必须具有定义的height
另请参见:min-height: 100vh
min-vh-100
align-items:center
下面的bootstrap 4类帮助我解决了这个问题body { display:flex; align-items:center; }
因为以上都不适合我,所以我添加了另一个答案。目标:使用bootstrap 4 flexbox类在页面上垂直和水平对齐div。步骤1:将最外面的div设置为Updated Pen的高度。这会将高度设置为Veiwport高度的100%。如果您不这样做,则别无选择。将其设置为
<div class="col text-center justify-content-center align-self-center"> <img width=3rem src=".." alt="..."> </div>
的高度仅相对于父级,因此,如果父级不是视口的整个高度,则将无法进行任何操作。在下面的示例中,我将“主体”设置为100vh。步骤2:将容器div设置为具有
100vh
类的flexbox容器。步骤3:使用
100%
类将div水平居中。步骤4:使用
d-flex
将div垂直居中第5步:运行页面,查看垂直和水平居中的格。
请注意,不需要在居中的div本身(子div)上设置特殊的类
justify-content-center
align-items-center
h-100
<div class="d-flex vh-100">
<div class="d-flex w-100 justify-content-center align-self-center">
I'm in the middle
</div>
</div>
标题旁边的 <div className='container vh-100 d-flex align-items-center col justify-content-center'>
<div className="">
...
</div>
</div >
内居中放置引导程序徽章时,这对我有用。做的工作是一些简单的CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row align-items-center justify-content-center" style="height:100vh;">
<div>Center Div Here</div>
</div>
</div>
</body>
</html>