无法居中对齐按钮答案

【问题标题】：Unable to center align button无法居中对齐按钮
【发布时间】：2017-06-03 15:28:53
【问题描述】：

我不明白为什么这不起作用？我试图让按钮在div 中居中。出于某种原因，无论我做什么，按钮都会在div 内左对齐。

这是我当前的 HTML，我认为它绝对可以工作，但不行。

<div class="row block well" id="section3">
        <h1 style="text-align:center">Client Testimonials</h1>
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him.<br>
                <button class="buttonz" onclick="cycle()"><span>More </span></button>
            </p>
        </div>
        <div class="col-md-3"></div>
    </div>

这是正在处理的 CSS

.buttonz {
  display: inline-block;
  border-radius: 10px;
  background-color: #b5cfc1;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: auto;
}

.buttonz span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonz span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttonz:hover span {
  padding-right: 25px;
}

.buttonz:hover span:after {
  opacity: 1;
  right: 0;
}

谁能找到我哪里出错了？

【问题讨论】：

标签： html css

【解决方案1】：

尝试下面的 css 以使按钮居中。

.buttonz { display: block; margin: 0 auto; }

【讨论】：

@RhinoTekMN 检查我的答案

【解决方案2】：

您的p 标签和button 都需要具有相同的显示属性。由于 p 标签默认为display: block;，因此也将其添加到您的按钮中。

.buttonz {
    display: block;
}

这是一个工作演示。

<!DOCTYPE html>
<html>

<head>
    <style>
        .buttonz {
            display: block;
            border-radius: 10px;
            background-color: #b5cfc1;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 28px;
            padding: 20px;
            width: 200px;
            transition: all 0.5s;
            cursor: pointer;
            margin: auto;
        }
        
        .buttonz span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }
        
        .buttonz span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }
        
        .buttonz:hover span {
            padding-right: 25px;
        }
        
        .buttonz:hover span:after {
            opacity: 1;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="row block well" id="section3">
        <h1 style="text-align:center">Client Testimonials</h1>
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him.
                <br>
                <button class="buttonz" onclick="cycle()"><span>More </span></button>
            </p>
        </div>
        <div class="col-md-3"></div>
    </div>
</body>

</html>

【讨论】：

【解决方案3】：

您需要将按钮的显示属性从'inline-block'更改为'block'

.buttonz {   display: block;   .... }

甚至，

.buttonz {   display: table;   .... }

https://jsfiddle.net/cjm5L59z/

如果您想知道为什么 margin: 0 auto 不能与 inline-block 元素一起使用，请参考以下问题：

What is the difference between display: inline and display: inline-block?

div with display:inline-block margin 0 auto not center

Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?

【讨论】：

【解决方案4】：

为什么你把按钮放在<p> 标签内？你可以看到this，这是我在codepen中为你做的。

【讨论】：

【解决方案5】：

.buttonz {
  display: inline-block;
  border-radius: 10px;
  background-color: #b5cfc1;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: auto;
}

.buttonz span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonz span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttonz:hover span {
  padding-right: 25px;
}

.buttonz:hover span:after {
  opacity: 1;
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row block well" id="section3">
        <h1 style="text-align:center">Client Testimonials</h1>
        <div class="col-md-3"></div>
        <div class="col-md-6 text-center">
            <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him.<br>
                <button class="buttonz" onclick="cycle()"><span>More </span></button>
            </p>
        </div>
        <div class="col-md-3"></div>
    </div>

我刚刚将text-center 类放在col-md-6 中。并且有效。

这里是JSFiddle

【讨论】：

【解决方案6】：

试试这个

在按钮周围包裹一个 div 并添加 style="text-align: center;"

<div style="text-align: center;"> <button class="buttonz" onclick="cycle()"><span>More </span></button></div>

【讨论】：

感谢您的建议。我试过了，但正如下面指出的那样，这是因为我有 2 个不同的显示分配。