如何阻止将圆形按钮变成椭圆形的文本？

Question

我正在使用Pug和CSS制作一个圆形按钮，看起来像这样，其中没有任何文本：

这是我使用的代码

button(class="round-button")

.round-button {border: none; padding: 40px; border-radius: 1000px; }

无文字看起来不错。如果我添加文本，它看起来像这样：

当按钮中有文字时，如何使其保持圆形？

Answer 1

使用边界半径：50％。

高度和宽度也必须相同。

.round-button {
border: none; 
height: 40px;
width: 40px;
border-radius: 50%; 
background-color: pink;
text-align: center;
}

<button class="round-button">text</button>

Answer 2

您仅需要editcar = (e, car) => {} 即可，特别是当文本的长度是动态的时，如果使用填充，它就不会圆整。

fixed-height

Answer 3

在您的初始模型中，您有一个80px x 80px的圆圈。如果您知道您的文字适合该文字，请考虑执行以下操作：

.round-button {
  width: 80px;
  line-height: 80px;
  text-align: center;
  display: inline-block;
  padding: 0;
}

这会将填充变为0。line-height强制圆的高度。宽度强制宽度。您可以保留边界半径，也可以保留其他人提到的半径的50％。

缺点是，如果文本变大，则可能会溢出圆的边界。

Answer 4

宽度和高度必须具有相同 长度。

如果不 知道宽度和高度（没有CSS声明），则必须使用 JavaScript 。选择所有按钮。循环浏览按钮，测量宽度，然后使用测量的宽度设置高度。

示例

function El(selector) {
  return document.querySelectorAll(selector);
}

function getCSS(el, value) {
  return window.getComputedStyle(el, null).getPropertyValue(value);
}

var roundButtons = El(".round-button");

roundButtons.forEach(function(roundButton) {
  var width = getCSS(roundButton, "width");
  roundButton.style.height = width;
});

.round-button {
  border: none;
  padding: 40px;
  border-radius: 50%;
  background: seagreen;
}

<button class="round-button">Button</button>
<button class="round-button">Button 2</button>
<button class="round-button">Another rounded square button</button>