CSS代码实现一个两行按钮的水平居中

Question

新手报道。我一直在尝试，但似乎无法解决这个问题。我有一个好看的两行按钮，功能良好。我想要在页面上水平居中它，但我只能想到如何使它向左或向右移动。

HTML:
<a href="#" target="_blank" class="button">abcd efgh ijk lmn opqrstu<br>(abcd efrghijk + lmno pqurstuvwk)</a>

CSS:
.button {
  width: 250px;
  float: left;
  text-align: center;
  border-top: 1px solid #96d1f8;
  background: #65a9d7;
  background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
  background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
  background: -moz-linear-gradient(top, #3e779d, #65a9d7);
  background: -ms-linear-gradient(top, #3e779d, #65a9d7);
  background: -o-linear-gradient(top, #3e779d, #65a9d7);
  padding: 9.5px 19px;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  border-radius: 13px;
  -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
  color: white;
  font-size: 16px;
  font-family: Georgia, serif;
  text-decoration: none;
  vertical-align: middle;
}

.button:hover {
  border-top-color: #28597a;
  background: #28597a;
  color: #ccc;
}

.button:active {
  border-top-color: #1b435e;
  background: #1b435e;
}

- causer

Answer 1

Flexbox 解决方案：将按钮放在容器内并使用 flexbox。从按钮中删除 float 属性。

.container {
  display: flex;
  justify-content: center;
}
.button {
  width: 250px;
  text-align: center;
  border-top: 1px solid #96d1f8;
  background: #65a9d7;
  background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
  background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
  background: -moz-linear-gradient(top, #3e779d, #65a9d7);
  background: -ms-linear-gradient(top, #3e779d, #65a9d7);
  background: -o-linear-gradient(top, #3e779d, #65a9d7);
  padding: 9.5px 19px;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  border-radius: 13px;
  -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
  color: white;
  font-size: 16px;
  font-family: Georgia, serif;
  text-decoration: none;
  vertical-align: middle;
}
.button:hover {
  border-top-color: #28597a;
  background: #28597a;
  color: #ccc;
}
.button:active {
  border-top-color: #1b435e;
  background: #1b435e;
}

<div class="container">
  <a href="#" target="_blank" class="button">abcd efgh ijk lmn opqrstu<br>(abcd efrghijk + lmno pqurstuvwk)</a>
</div>

- m4n0

Answer 2

使用line-height属性：

    a { line-height: 50px; }

这仅适用于文本占据一行的情况。如果你需要处理多行文本，你可以使用display:table-cell:

    a { display: table-cell; vertical-align: middle; }

或者查看这个link。

- Gaurav Vachhani

Answer 3

在你的CSS中添加以下内容：

display: block;
margin: 0 auto;

并删除：

float: left;

JSFiddle: http://jsfiddle.net/om8vgnb7/

JSFiddle：{{link1：http://jsfiddle.net/om8vgnb7/}}

- Nick Coad

Answer 4

你的 float: left; 是不必要的，而且不允许你将按钮居中在任何东西中。

用 display: inline-block; 替换 float: left;。

然后你可以做类似这样的事情：

<div style="text-align: center;">
    <a href="#" class="button">My Button</a>
</div>

- Strelok