Question

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <button type="button" class="btn btn-outline-primary">Gallary</button>
    </div>
  </div>
</div>

我是html和bootstrap的新手。我试图在垂直和水平方向的网页中心放置一个按钮。我创建了一个容器，并在其中添加了一行。在行内，我偏移了4列div元素。在div元素内部是按钮。但是此按钮似乎不在中央。如果我添加第二个按钮并尝试使其偏移，它将被放置在中间，但悬停将无法工作（或按钮无法工作）。

Answer 1

在Bootstrap 4中，您应该使用text-center类来对齐内联块。

注意：text-align：center;无论您使用的是Bootstrap版本如何，您在应用于父元素的自定义类中定义的定义都将起作用。这正是.text-center的适用范围。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">    
<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>
  </div>
</div>

Answer 2

如官方 Bootstrap Docs 中所述，您只需将类名text-center添加到父类列表中，即可使用{{1}将其子文本元素水平居中}。

检查并运行以下代码段，以获取使用text-align: center类名的实际示例：

text-center

/* CSS */

a {text-decoration: none;}

Answer 3

在引导程序中已经有一个具有text-align：center属性的“文本中心”类。您应该在父元素中使用它，以使子元素居中对齐。

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4 text-center">
      <button class="btn btn-default">Gallery</button>
    </div>
  </div>
</div>

如何使用引导程序使按钮居中对齐？

3 个答案: