我正在尝试使用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>
重要! 垂直中心相对于父级的高度
如果您要居中的元素的父级没有定义的 高度,则所有垂直居中解决方案都将无法使用!
现在,进入Bootstrap 4的垂直居中…
您可以使用新的flexbox和size实用程序制作container全高和display: flex。这些选项不需要额外的CSS(容器的高度(即:html,body)必须为100%)。
container
display: flex
align-self-centerflexbox子项的选项1
align-self-centerflexbox
<div class="container d-flex h-100"> <div class="row justify-content-center align-self-center"> I'm vertically centered </div> </div>
align-items-centerflexbox父项上的选项2(.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>
justify-content-centerflexbox父项上的选项3(.cardis 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和其他实用程序,有很多方法可以进行垂直对齐。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>
my-auto 表示垂直y轴上的边距,它等效于:
margin-top: auto; margin-bottom: auto;
2-带Flexbox的垂直中心:
垂直中心网格列
由于Bootstrap 4 .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-*行垂直居中对齐…
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>
3-使用显示实用程序的垂直居中:
自举4具有显示utils的,可以被用于display:table,display:table-cell,display:inline等。这些可与所使用的垂直取向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>
重要! 我有提到身高吗?
请记住,垂直居中是相对于父元素的高度的。如果您想在整个页面上居中,大多数情况下,这应该是您的CSS …
body,html { height: 100%; }
或在父/容器上使用min-height: 100vh(min-vh-100在Bootstrap 4.1+中)。如果要将子元素居中放置在父元素内部。父级必须具有定义的身高。