html - 字体大小迫使圆形按钮变宽

Question

我这里遇到了一些问题。

我正在使用 Ionic 3。

我有一个带有加号的圆形按钮。当我增加加号 font-size 时，它会强制按钮变宽 as you can see here 。我尝试过设置 max-width 和 !important 以及许多其他内容，但它们没有做任何事情。 Here is what it looks like unscaled

.btnAddImage {
  background: rgba(255, 255, 255, 0.3);
  width: 150px;
  height: 150px;
  color: #4E4E4E;
  font-size: 100px;
  border-radius: 50%;
}

<div text-center>
  <button ion-button class="btnAddImage">+</button>
</div>

我的目标是有一个带有大加号的圆形按钮。

干杯，祖克

Answer 1

这有效，只需更改类名称:

.circle {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
  border: 1px solid black;
}

.circle::after {
  content: " ";
  position: absolute;
  display: block;
  background-color: black;
  height: 5px;
  margin-top: -5px;
  top: 50%;
  left: 10px;
  right: 10px;
  z-index: 9;
}

.circle::before {
  content: " ";
  position: absolute;
  display: block;
  background-color: black;
  width: 5px;
  margin-left: -5px;
  left: 50%;
  top: 10px;
  bottom: 10px;
  z-index: 9;
}

<div class="circle"></div>