html - 如何移动html中中间的按钮？

Question

我的代码是这样的，我尝试了几次将按钮移到中间但失败了。我应该如何修改代码来更改按钮的位置？它总是在最左边。谢谢!

<div class="jumbotron">
    <h1 align="center">Bucket List App</h1>
    <p class="lead"></p>
    <p><a class="btn btn-lg btn-success" href="showSignUp" role="button" style="width:200px">Sign up today</a></p>
</div>

Answer 1

最简单的方法是使用 Flex 类d-flex justify-content-center。查看下面的代码:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="jumbotron">
    <h1 align="center">Bucket List App</h1>
    <p class="lead"></p>
    <div class="d-flex justify-content-center">
    	<a class="btn btn-lg btn-success" href="showSignUp" role="button" style="width:200px">Sign up today</a>
    </div>
</div>

如果您想对齐所有元素，可以向 jumbotron 添加 d-flex flex-columnalign-items-center 类。这取决于您的需要。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="jumbotron d-flex flex-column align-items-center">
  <h1>Bucket List App</h1>
  <p class="lead"></p>
  <div>
    <a class="btn btn-lg btn-success" href="showSignUp" role="button" style="width:200px">Sign up today</a>
  </div>
</div>