字体大小强制圆形按钮更宽答案

【问题标题】：Font Size forces Circle Button Wider字体大小强制圆形按钮更宽
【发布时间】：2018-11-14 23:13:28
【问题描述】：

我这里有点问题。

我正在使用 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>

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

干杯，祖克

【问题讨论】：

你的目标是什么？加号较大的圆形按钮？
是的，@benni 这就是我想要的
@zuke 添加类名到 div "text-center"
可能是因为按钮上有自然的填充和边框使其拉长 - 尝试将 box-sizing: border-box 添加到按钮。如果这不是问题，请您提供minimal reproducible example，因为您提供的代码似乎可以正常工作（在 chrome 中）
您不能使用代码 sn-p，因为我使用的是 ionic。我在想也许我应该只使用一张图片，box-sizing: border-box; 没有用。

标签： html css ionic-framework ionic3

【解决方案1】：

尝试以下方法：

.text-center {
background: #000;
    width: 200px;
    height: 200px;
    color: #4E4E4E;
    display: table-cell;
    vertical-align: middle;
}
.btnAddImage{
    font-size: 50px;
    background: rgba(255,255,255, 0.3);
    width: 150px;
    height: 150px;
    color: #fff;
    border-radius: 50%;
}

【讨论】：

它适用于代码 sn-p 但我有一个不同的问题。我正在使用离子。感谢您的尝试！

【解决方案2】：

这可行，只需更改 class 名称：

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

&lt;div class="circle"&gt;&lt;/div&gt;

【讨论】：

我只是想保持简单并使用文本加号而不是用 css 创建一个。不过谢谢！