在Bootstrap 4中垂直居中对齐

Question

11 浏览2023年1月11日

匿名的 2023年1月11日

0 Comments

我正在尝试使用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(' ' + response.quoteText + ' 
');
        $("#quote-author").html('' + response.quoteAuthor + '');
        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();
   });
});

匿名的 · Answer 1 · 2023-03-31T08:39:08+00:00

在Bootstrap 4中，垂直居中对齐是一个常见的问题。根据上述内容中提到的问题和解决方法，我们可以得出以下结论。

问题的原因：

在Bootstrap 4中，默认情况下，只能使用`justify-content-center`类来水平居中内容，而不能直接通过类来垂直居中内容。

解决方法：

要在Bootstrap 4中实现垂直居中对齐，可以使用以下代码：


  居中对齐（水平和垂直）！

这段代码将使用`vh-100`类将`div`元素的高度设置为视口的100%，然后使用`d-flex`类将其设置为弹性容器。接下来，使用`justify-content-center`类将内容水平居中，并使用`align-items-center`类将内容垂直居中。

通过上述代码和解释，我们可以看到在Bootstrap 4中实现垂直居中对齐的方法。通过使用适当的类和样式，我们可以轻松地实现水平和垂直居中对齐的效果。

匿名的 · Answer 2 · 2023-01-15T11:34:24+00:00

在Bootstrap 4中，垂直居中容器的问题出现的原因是没有正确使用Bootstrap类或属性。解决方法是使用Flexbox来创建一个父容器，并添加`align-items:center`样式来垂直居中。

具体的解决方法如下：

1. 在`body`选择器中添加以下样式：

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

2. 如果使用了Bootstrap 5，可能会出现样式冲突的问题。可以尝试使用Bootstrap 4或手动调整CSS样式来解决。

3. 在HTML中，可以使用`

`将文本包裹起来，来实现垂直居中。

以上是解决Bootstrap 4中垂直居中容器问题的方法。在实际应用中，根据具体情况选择合适的方法来实现垂直居中。

匿名的 · Answer 3 · 2023-01-16T07:42:48+00:00

问题：在Bootstrap 4中垂直居中对齐的问题的原因是什么？如何解决？

原因：如果要居中对齐的元素的父元素没有定义高度，则任何垂直居中解决方案都无法起作用。

解决方法：

1. 使用flexbox的对齐属性在flexbox的父元素（row或d-flex）上使用align-items-center或justify-content-center。

2. 使用align-self-center在flexbox的子元素上使用align-self-center。

3. 使用align-items-center在flexbox的父元素上使用align-items-center。

4. 使用justify-content-center在flexbox的父元素上使用justify-content-center。

5. 使用my-auto在flexbox的父元素上使用my-auto。

Bootstrap 5也是基于flexbox的，因此垂直居中的方法与Bootstrap 4相同。

此外，还可以使用自动margin或display utils等其他方法来实现垂直居中。

垂直居中的方法取决于父元素的高度。在Bootstrap 4中，可以使用flexbox和其他工具来实现垂直居中。需要注意的是，父元素必须有一个定义的高度。可以使用CSS的height属性或min-height属性来定义父元素的高度。

参考链接：

- [Vertical Center in Bootstrap 5](https://codeply.com/p/0VM5MJ7Had)

- [Vertical Center Using Auto Margins](http://www.codeply.com/go/akn5BYxQwn)

- [Vertical Center with Flexbox](http://www.codeply.com/go/GFgGl4YS27)

- [Vertical Center Using Display Utils](http://www.codeply.com/go/30DYTbq83o)

其他参考链接：

- [Vertical alignment in bootstrap 4](https://stackoverflow.com/questions/43313090)

- [Bootstrap Center Vertical and Horizontal Alignment](https://stackoverflow.com/questions/42388989)

- [how to append the bootstrap 5 dropdown menu to a specific element when the drop](https://stackoverflow.com/questions/71031318)