在引导4中垂直对齐中心 - Code

我试图用Bootstrap 4在页面中间居中我的容器。到目前为止我还没有成功。任何帮助都将不胜感激。

我在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>

当前回答

在你的div上使用.my-auto (bootstrap4) CSS类

2019-10-02 09:38:22

其他回答

Bootstrap 4.1.3中:

当我试图在容器>行>列旁边的h1标题中居中引导徽章时，这为我工作。

工作的是一些简单的css:

.my-valign-center {
  vertical-align: 50%;
}

or

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

2018-08-29 17:49:44

.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

2017-02-15 14:47:40

<!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>

2019-01-23 12:45:49

将你的内容放在一个100%高的flexbox容器中，即h-100。然后使用justify-content-center类对内容进行集中验证。

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>

2019-12-06 11:34:10

使用引导版本5或更高版本，使用下面的代码将内容水平和垂直居中。

<div class="vh-100 d-flex justify-content-center align-items-center">
  <h1>Centered horizontally and vertically!</h1>
</div>

2021-08-02 04:57:27

aliyun