Code
2023-09-15 05:00:07

在引导4中垂直对齐中心

我试图用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>

当前回答

因为以上这些对我都没用，所以我再加上一个答案。

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

第一步:设置最外层div的高度为100vh。这将高度设置为Veiwport高度的100%。如果你不这么做，其他什么都不管用。将它的高度设置为100%只是相对于父级，所以如果父级不是视口的全高，什么都不会起作用。在下面的例子中，我将Body设置为100vh。

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

步骤3:用justify-content-center类水平居中div。

第四步:用align-items-center将div垂直居中

第五步:运行页面，查看垂直和水平居中的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>
2018-09-30 11:01:04

其他回答

在Bootstrap 4 (beta)中，使用align-middle。参考Bootstrap 4关于垂直对齐的文档:

使用vertical-alignment改变元素的对齐方式 实用工具。请注意，垂直对齐只影响内联， 内联块、内联表和表单元格元素。 选择。align-baseline， .align-top， .align-middle， .align-bottom， .align-text-bottom和.align-text-top。

2017-10-15 13:30:27

使用这个引导4个类:

Method1:

父:d表 和 子:d-table-cell & align-middle & text-center

eg:

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

如果你想让父母圆:

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

这两个自定义CSS类如下:

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

最后的用法可以是这样的:

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

Method2: 你可以使用以下方法:

父项:h-100 d-table mx-auto 和 d-table-cell align-middle

Method3:

你可以使用以下方法:

父项:d-flex align-items-center

如果你想让内容水平居中:

父级:d-flex align-items-center justify-content-center

2020-03-12 09:40:14 
<!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

因为以上这些对我都没用，所以我再加上一个答案。

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

第一步:设置最外层div的高度为100vh。这将高度设置为Veiwport高度的100%。如果你不这么做，其他什么都不管用。将它的高度设置为100%只是相对于父级，所以如果父级不是视口的全高，什么都不会起作用。在下面的例子中，我将Body设置为100vh。

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

步骤3:用justify-content-center类水平居中div。

第四步:用align-items-center将div垂直居中

第五步:运行页面，查看垂直和水平居中的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>
2018-09-30 11:01:04

我在Bootstrap 4.3.1中是这样做的:

<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>
2019-05-23 15:30:17

推荐文章

aliyun

最新文章

标签

2024 code 京ICP备15047053号-1