如何使用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>

我希望文本的最大寬度為600px，並在超大屏幕上水平居中。

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放在單獨的文件中並導入。