在引导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 class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

2018-04-14 09:15:27

其他回答

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

2019-10-02 09:38:22

你可以通过使父容器伸缩并添加align-items来垂直对齐你的容器:

body {
  display:flex;
  align-items:center;
}

更新的钢笔

2017-02-15 14:47:28

对于所有Bootstrap版本2,3,4和5，只有两个自定义类适用于任何高度和宽度。

.d_tbl{ display:table; width:100%; height:200px; } .d_tblCel{ vertical-align: middle; display: table-cell; text-align: center; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="d_tbl" style="background-color:antiquewhite"> <div class="d_tblCel"> <h3>Centered horizontally and vertically</h3> <p>for all bootstrap versions with only two custom classes</p> </div> </div> </div> </body> </html>

2021-10-30 07:37:19

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

aliyun