如何在全尺寸超大屏幕中使用 bootstrap 4 将一些文本居中，并为 div 或 p 容器设置最大宽度？

Question

我正在学习如何使用 bootstrap 4，当我尝试在全尺寸超大屏幕中将一些文本水平居中时，效果很好。当我尝试在该文本容器上放置最大宽度时，它会将所有文本放在超大屏幕的左侧。

使用 class="d-flex justify-content-center align-items-center" 使其工作。一旦我添加了 style="max-width: 600px" 它就会破坏它并将文本放在最左边。

这是我当前的代码：

<div class="jumbotron">
    <h1 class="display-4 text-sm-center">Main Header</h1>
    <div style="max-width: 600px" class="d-flex justify-content-center align-items-center">
        <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
    </div>
</div>

我希望文本的最大宽度为 600 像素，并在超大屏幕中水平居中。

Answer 1

您可以简单地使用 <center style=""> 您的 <div></div> 和其他代码 </center>

Answer 2

添加 CSS margin: auto; 应该可以解决问题。我添加了一个片段。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="jumbotron">

    <h1 class="display-4 text-sm-center">Main Header</h1>
    
    <div style="max-width: 600px; margin: auto;" class="d-flex center justify-content-center align-items-center">
    
        <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum 
            faucibus dolor auctor. Duis mollis, est non commodo luctus. 
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus 
            dolor auctor. Duis mollis, est non commodo luctus.</p>
        
    </div>
    
</div>

您应该避免内联 CSS，考虑将 CSS 放在一个单独的文件中并导入它。

如何在全尺寸超大屏幕中使用 bootstrap 4 将一些文本居中，并为 div 或 p 容器设置最大宽度？

How can I center some text using bootstrap 4 in a full sized jumbotron and setting a max-width for just the div or p container?

html

css

text-align

center

bootstrap-4