代码之家 › 专栏 › 技术社区 › Yunti

无法在容器中成功将按钮居中

twitter-bootstrap css

Yunti · 技术社区 · 7 年前

我正在使用引导程序4,但我无法正确地将按钮/链接居中-无论我如何尝试使用 text-center 类(用DIV或链接将其包围)

<div class="row text-center">
  <a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
</div>

此处输入代码: https://codepen.io/anon/pen/GdbPyr

2 回复 | 直到 7 年前

manAbl 7 年前

只需添加: justify-content-center 到父组件。代码如下:

<!-- ******Key Features****** -->
<section class="key-features ">
  <div class="container pt-4">
    <div class="row justify-content-center"style="background: red">
      <a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
    </div>
  </div>
</section>

工作笔: https://codepen.io/manAbl/pen/bMPOJM?editors=1000 ;

希望有帮助:)

Robert 7 年前

您可以替换 text-center 在您的 btn 具有 mx-auto 要使左右页边距相等:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<section class="key-features ">
  <div class="container pt-4">
    <div class="row">
      <a class="btn btn-primary mx-auto" href="{% url "users:postcode" %}">Get Started</a>
    </div>
  </div>
</section>