如何使用引导程序居中对齐按钮？ [复制]答案

【问题标题】：How to center align a button using bootstrap? [duplicate]如何使用引导程序居中对齐按钮？ [复制]
【发布时间】：2019-01-16 19:36:19
【问题描述】：

<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 和引导程序的新手。我试图在网页的中心垂直和水平放置一个按钮。我创建了一个容器并在其中添加了一行。在行内，我偏移了一个 4 列的 div 元素。 div 元素内部是按钮。但是这个按钮似乎不在中心。如果我添加第二个按钮并尝试偏移它，它将被放置在中心但悬停将不起作用（或按钮不起作用）。

【问题讨论】：

请在此处添加您的代码。

标签： css html button bootstrap-4

【解决方案1】：

在 Bootstrap 4 中，您应该使用 text-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>

【讨论】：

【解决方案2】：

在引导程序中已经有一个具有 text-align: center 属性的类 'text-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】：

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

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

/* CSS */

a {text-decoration: none;}

<!-- HTML -->

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

<div class="container">
  <div class="row">

    <div class="col-md-4 col-md-offset-4 text-center">
        <button type="button" class="btn btn-outline-primary"><a href="#linkToYourOtherPage">Gallary</a></button>
    </div>

  </div>
</div>

【讨论】：

这对我来说完美地定位了按钮。但该按钮似乎在谷歌浏览器中不起作用。没有重定向、悬停或光标。它在运行代码 sn-p 时工作。
嗯....这很奇怪。您需要按钮将您重定向到链接吗？
我只需要它作为一个按钮就可以将我带到下一页。
那么你需要在按钮内部嵌套一个锚标签。让我更新答案。
查看更新的代码sn-p。