CSS bootstrap 4 在中心对齐按钮

bootstrap 4 align buttons in center

提问by Strahinja Ajvaz

im a little stuck as to how to center align a button group i have:

我对如何将我拥有的按钮组居中对齐有点困惑：

<section>
  <div class="d-inline mx-auto">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

I've tried to add d-inline and mx-auto to it but it doesnt work. Im not that familiar with the library so could someone please point me in the right direction?

我尝试向其中添加 d-inline 和 mx-auto，但它不起作用。我对图书馆不太熟悉，所以有人可以指出我正确的方向吗？

回答by Znaneswar

Just use margin:autoits working with bootstrap 4

只需将margin:auto其与 bootstrap 4 一起使用即可

.center{margin:auto;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="row">
  <div class="center">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

或者你可以这样使用mx-automx-auto..

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="row">
  <div class="mx-auto">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

回答by Sylvia

add the 2 classes mx-auto d-blockto the button

将 2 个类添加mx-auto d-block到按钮

<button class="btn btn-primary mx-auto d-block">My Button</button>

this worked for me when the button was in a card-body div.

当按钮位于卡片主体 div 中时，这对我有用。

回答by ankita patel

By default bootstrap give text-centerclass. Please add this. Extra css or class haven't needed.

默认情况下引导程序给出text-center类。请添加这个。不需要额外的 css 或 class。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<section>
  <div class="text-center">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

回答by Ehsan

Insert class center:

插入类center：

<div class="d-inline mx-auto center">

And:

和：

 .d-inline.mx-auto.center {
    text-align: center!important;
    display:block!important;
}

.d-inline.mx-auto.center {
    text-align:center!important;
    display:block!important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<section>
  <div class="d-inline mx-auto center">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

回答by Md. Abu Sayed

Different way to also try it, to parent element text-align: centerexample:

也可以尝试不同的方法，以父元素text-align: center为例：

.center { text-align: center; }

TRY THIS CSS

试试这个 CSS

<section>
    <div class="center">
        <a class="btn btn-outline-primary" href="#">Home</a>
        <a class="btn btn-outline-primary" href="#">Traffic</a>
        <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
        <a class="btn btn-outline-primary" href="#">Alert Logging</a>
        <a class="btn btn-outline-primary" href="#">Diameter Server</a>
        <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
     </div>
</section>

回答by Maijied Hasan Shuvo

Simple way to do that: just add: style="margin-left: 45%;"

这样做的简单方法：只需添加： style="margin-left: 45%;"

<section>
  <div class="d-inline mx-auto" style="margin-left: 45%;">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

回答by nownow1989

Making a quick landing page and wanted the button centered. Adding a div was a simple solution for me :)

制作一个快速登录页面并希望按钮居中。添加 div 对我来说是一个简单的解决方案:)

了解更多

My page in progress

我的页面进行中