Bootstrap 4中的垂直对齐中心

html CSS

十三

2020-03-23

我正在尝试使用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>

第2976篇《Bootstrap 4中的垂直对齐中心》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
小卤蛋 2020.03.23 
<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Today’s Special </h2>
                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
            </div>
        </div>

enter image description here

猴子 2020.03.23

在Bootstrap 4（测试版）中，使用align-middle。请参阅有关垂直对齐的Bootstrap 4文档：

使用垂直对齐 工具更改元素的对齐方式。请注意，vertical-align仅影响inline， inline-block，inline-table和table单元元素。

选择.align-baseline，.align-top，.align-middle，.align-bottom， .align-text-bottom，和.align-text-top需要。

LGil 2020.03.23

由于以上都不对我有用，因此我添加了另一个答案。

目标：使用bootstrap 4 flexbox类在页面上垂直和水平对齐div。

步骤1：将最外面的div设置为100vh。这会将高度设置为Veiwport高度的100％。如果您不这样做，则别无选择。将其设置为的高度100%仅相对于父级，因此，如果父级不是视口的整个高度，则没有任何效果。在下面的示例中，我将“主体”设置为100vh。

步骤2：将容器div设置为带有d-flex类的flexbox容器。

第3步：在justify-content-center课堂上将div水平居中。

第4步：将div垂直居中 align-items-center

第5步：运行页面，查看垂直和水平居中的div。

请注意，不需要在居中的div本身（子div）上设置特殊的类

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>
番长 2020.03.23

您可以通过使父容器弯曲并添加align-items:center以下内容来垂直对齐容器：

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

更新笔

JinJin 2020.03.23

引导4课后，我帮助解决了这个问题

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android