有什么方法可以对齐中心的巨控元件吗？
有什么方法可以对齐中心的巨控元件吗？
提问于 2020-06-23 07:19:42
在下面的代码片段中，我尝试将div内部的.jumbotron与中心对齐，但它没有工作。是否需要额外的类，因为我已经尝试过.justify-content-center和.mx-auto。
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- EndCSS -->
<div class="jumbotron">
<div class="justify-content-center">
<h1 class="display-3">Lorem.</h1>
<p class="lead">Lorem, ipsum dolor.<span class="text-
warning">Lorem, ipsum.</span><br>Lorem ipsum dolor
sitamet.
</p>
</div>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-06-23 07:23:35
您可以使用以下解决方案：
- 将
d-flex设置为jumbotron，以便在大型加速器上使用flex类(如justify-content-center)。 - 将
justify-content-center设置为jumbotron本身，以使其内容中心化。
F 210
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="jumbotron d-flex justify-content-center">
<div>
<h1 class="display-3">Lorem.</h1>
<p class="lead">Lorem, ipsum dolor.<span class="text-
warning">Lorem, ipsum.</span><br>Lorem ipsum dolor
sitamet.
</p>
</div>
</div>
Stack Overflow用户
发布于 2020-06-23 07:26:19
文本中心类的引导可能会有所帮助。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="jumbotron text-center">
<h1 class="display-3">Lorem.</h1>
<p class="lead">Lorem, ipsum dolor.<span class="text-
warning">Lorem, ipsum.</span><br>Lorem ipsum dolor sitamet.
</p>
</div>
Stack Overflow用户
发布于 2020-06-23 07:31:43
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- EndCSS -->
<div class="jumbotron">
<div class="d-flex flex-row justify-content-center">
<h1 class="display-3">Lorem.</h1>
<p class="lead">Lorem, ipsum dolor.<span class="text-
warning">Lorem, ipsum.</span><br>Lorem ipsum dolor
sitamet.
</p>
</div>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62529373
复制相关文章
相似问题
腾讯云开发者
