在圆形按钮上居中文本

Question

我想创建一个按钮圆圈 link，其中包含文本，但我无法将圆圈按钮内的文本居中。行高太大。对这个问题有什么建议吗？

.btn-donate {
  background: #97c83e;
  text-align: center;
  width: 149px;
  height: 148px;
  border-radius: 100%;
  display: inline-block;
  font-size: 35px;
  line-height: 2.3;
  vertical-align:middle;
  color: white;
  font-weight: bold;
  text-decoration: none
}

<a href="" class="btn btn-donate">
  Donate <span>Us</span>
</a>

我正在尝试创建这样的按钮

Answer 1

Flexbox 可以做到这一点：

.btn-donate {
  background: #97c83e;
  text-align: center;
  width: 149px;
  height: 149px;
  border-radius: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  color: white;
  font-weight: bold;
  text-decoration: none
}

<a href="" class="btn btn-donate">Donate <span>Here</span></a>

Answer 2

如果您将另一个元素添加到您的标记中，您可以结合使用相对位置和 transform

来居中

.btn-donate {
  background: #97c83e;
  text-align: center;
  width: 149px;
  height: 148px;
  border-radius: 100%;
  display: inline-block;
  font-size: 35px;
  vertical-align: middle;
  color: white;
  font-weight: bold;
  text-decoration: none
}
.wrapper {
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<a href="" class="btn btn-donate">
  <span class="wrapper">Donate <span>Us</span></span>
</a>

Answer 3

使用 inline-blocks 将它们垂直排列，而不是像 here.

那样使用 line-height

我已将全文移动到标记 span 中

下面的片段：

.btn-donate {
  background: #97c83e;
  text-align: center;
  width: 149px;
  height: 148px;
  border-radius: 100%;
  display: inline-block;
  font-size: 35px;
  vertical-align: middle;
  color: white;
  font-weight: bold;
  text-decoration: none
}
a.btn.btn-donate span {
  display: inline-block;
  vertical-align: middle;
}
a.btn.btn-donate:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

<a href="" class="btn btn-donate"><span>Donate Us</span></a>

Answer 4

我通常偏向于使用 table 显示属性，但我相信它会很好地满足您的要求。它只需要对样式和标记进行极少的调整。

.btn-donate span {
    vertical-align: middle;
    display: table-cell;
}

.btn-donate {
    background: #97c83e;
    text-align: center;
    width: 149px;
    height: 148px;
    border-radius: 100%;
    display: table;
    font-size: 35px;
    vertical-align: middle;
    color: white;
    font-weight: bold;
    text-decoration: none;
}

<a href=""class="btn btn-donate"><span>Donate Us</span></a>

在圆形按钮上居中文本

centering text on circle button

html

css

vertical-alignment