文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用bootstrap将按钮居中对齐？

问如何使用bootstrap将按钮居中对齐？
EN

Stack Overflow用户

提问于 2019-01-17 03:36:19

回答 3查看 7.1K关注 0票数 0

<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元素内部是按钮。但是这个按钮好像不在中间。如果我添加第二个按钮并尝试偏移它，它会被放在中间，但悬停不起作用(或者按钮不起作用)。

css

html

button

bootstrap-4

回答 3

Stack Overflow用户

发布于 2019-01-17 03:45:09

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

注意:无论您使用的是哪个Bootstrap版本，在应用于父元素的自定义类中定义的text-align:center；都将起作用。而这正是.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

Stack Overflow用户

发布于 2019-01-17 03:46:29

正如官方中所描述的，您只需将类名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>

票数 0

Stack Overflow用户

发布于 2019-01-17 03:48:31

在bootstrap中已经有一个具有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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54224132

复制

相似问题

问如何使用bootstrap将按钮居中对齐？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用bootstrap将按钮居中对齐？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用bootstrap将按钮居中对齐？
EN