css - 容纳文本的圆形按钮

Question

我在下面有这个按钮。它工作正常，但我希望它能够改变大小以适应不同的文本长度和大小。例如，如果我增加字体大小，如果字体太大(文本会超出按钮边界)，按钮会变大。我应该怎么做？

另外，为什么 bootstrap 使文本看起来比我预期的位置低一点？ (垂直居中)

.round-btn {
    margin: 0 auto;
    display:block;
    width:150px;
    height:150px;
    line-height:150px;
    border: 5px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    background-color: #17BAEF;
    font-size:20px;
    font-weight:bold;
   text-decoration: none;
   
  
}
.round-btn:hover {
   color: #17BAEF;
   background-color: #f5f5f5;
   text-decoration: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a class="round-btn" href="#">Button</a>

Answer 1

摆脱固定的宽度和高度，将其设置为最小值，添加填充以在文本和圆形边框之间具有合适的空间，然后通过 javascript 设置宽度和高度。这是实现此目的的唯一方法，因为您需要一个方形元素:

$(function() {
  var $elem = $(".round-btn");
  var maxSize = Math.max($elem.width(), $elem.height());

  $elem.width(maxSize).height(maxSize);
});

您还可以循环所有按钮以定位所有按钮。