时间戳

首页 > 解决方案 > 如何在html中移动中间的按钮？

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

问题描述

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

<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>

标签： htmlbootstrap-4

解决方案

最简单的方法是使用弹性类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>

如果要对齐所有元素，可以将d-flex flex-column align-items-center类添加到 jumbotron。这取决于你需要什么。

<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>

推荐阅读