将文本居中放在圆形按钮上

Question

我想在其中创建一个带有文字的按钮圈链接但是我有问题将文本置于圈子按钮内。线高太大。对此问题的任何建议？

以下是代码：https://jsfiddle.net/hma443rL/

＆＃13;

＆＃13;

.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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我试图创建一个像这样的按钮

Answer 1

Flexbox可以做到这一点：

＆＃13;

＆＃13;

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

＆＃13;

SELECT DISTINCT t.COL1, 
        (SELECT t1.COL2 + ' ' AS 'data()'
         FROM @TBL t1 
         WHERE t.COL1 = t1.COL1
         FOR XML PATH(''))
FROM @TBL t
WHERE t.COL1 = 'SomeString_1'

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用inline-block垂直排列，而不是像here那样使用line-height。

我已在标记

中的span内移动了全文

以下片段：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您在标记中添加其他元素，则可以使用相对位置和transform

的组合来居中

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

我通常不喜欢使用表格显示属性，但我相信这很符合您的要求。它需要对样式和标记进行非常小的调整。

.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>