Question

我有一个很大的“立即购买”按钮，在我的网页上设置为100宽度。文本以X轴为中心（水平），但不在y轴（垂直）上居中。这是我的班级：

.col-boosting .btn-pay-rank {
height: 65px;
font-weight: bold;
background: #e06b38;
border: none;
box-shadow: 0 7px 0 0 #c7511f;
text-align: center; 
line-height: 65px; }

更多信息，这是按钮的屏幕截图。 https://gyazo.com/2d0b5fc4be72ba87c9cf73cd922d8ebe

感谢。

Answer 1

将“立即购买”放在

元素中：

<p>Buy Now</p>

然后对齐它：

p {margin:0 auto;vertical-align:middle;}

Answer 2

将按钮放在父div中并使用此css：

＆＃13;

body {
  background: #f06d06;
  font-size: 80%;
  padding: 20px;
}
.parent {
  position: relative;
  background: white;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  resize: both;
  overflow: auto;
}
.parent div {
  background: black;
  color: white;
  width: 200px;
  height: 100px;
  margin: -70px 0 0 -120px;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
}

＆＃13;

<div class="parent">
  <div class="child">
    I'm a block-level element a fixed height and width, centered vertically within my parent.
  </div>
</div>

＆＃13;

来自CSS Tricks的替代解决方案：

＆＃13;

body {
  background: #f06d06;
  font-size: 80%;
  padding: 20px;
}
main {
  background: white;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  resize: both;
  overflow: auto;
}
main div {
  background: black;
  color: white;
  width: 50%;
  padding: 20px;
  resize: both;
  overflow: auto;
}

＆＃13;

<main>

  <div>
    I'm a block-level-ish element of an unknown width and height, centered vertically within my parent.
  </div>

</main>

＆＃13;

垂直和水平居中按钮

2 个答案: