Question

我无法弄清楚为什么这不起作用？我试图让按钮居中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;
}

有人能找到我错的地方吗？

Answer 1

您需要将按钮的显示属性更改为＆＃39;阻止＆＃39;来自＆＃39; inline-block＆＃39;

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

甚至，

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

https://jsfiddle.net/cjm5L59z/

如果您想知道为什么margin: 0 auto不能使用内联块元素，请参阅以下问题：

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 ?

Answer 2

p标记和button都需要具有相同的显示属性。由于p tag默认为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>

Answer 3

尝试使用以下css获取中心按钮。

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

Answer 4

为什么要在<p>标记内保留按钮？你可以看到我在codepen中为你做过的this。

Answer 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

Answer 6

试试这个

在div周围换行div并添加style =“text-align：center;”

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

无法居中对齐按钮

6 个答案: