css - 如何在圆形按钮中居中跨度文本[重复]答案

【问题标题】：css - how to center the span text in rounded button [duplicate]css - 如何在圆形按钮中居中跨度文本[重复]
【发布时间】：2021-09-20 18:54:04
【问题描述】：

代码沙盒：
https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js

我想将按钮中的- 文本居中，但找不到方法。

html

  <button class="round-button align-middle mr-1">
    <span>-</span>
  </button>

css

.round-button {
  min-width: 20px;
  max-height: 20px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: white;
  background-color: #3498db;
  border-radius: 100%;
  overflow: none;
  text-align: center;
  padding: 0;
}
.round-button:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
}

【问题讨论】：

我看到了你的代码沙箱，看起来文本是居中的，但你需要增加按钮的宽度。
@Random COSMOS 请查看我上面的图片
使用显示弹性
你的意思是垂直居中，如果是这样，那么正如 Muzamil301 所说，使用 display: flex;和对齐项目；中心;
我相信@Rahul Kapuriya 的答案更完整、更具描述性，应该被选为答案。

标签： css vue.js bootstrap-4

【解决方案1】：

html

<button class="round-button align-middle mr-1">-</button>

css

.round-button {
  min-width: 20px;
  height: 20px;
  border-style: none;
  color: white;
  background-color: #3498db;
  border-radius: 50%;
  text-align: center;
  padding: 0;
  line-height: 20px; // to center text vertically
}

您只需要添加与按钮高度相同的line-height，并且不需要额外的 span 元素来添加文本。我还删除了不必要的样式。

【讨论】：

【解决方案2】：

尝试将line-height: 20px 设置为该值。如果它仍然看起来不正常，您可能正在使用具有非标准行高的自定义字体。在这种情况下，使用 line-height 属性直到它看起来没问题。

【讨论】：

【解决方案3】：

将以下样式属性添加到.round-button：

.round-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

并且，删除 .round-button:before 的样式。

【讨论】：

【解决方案4】：

试试这个。

.round-button {
  background-color: #3498db;
  border-style: none;
  border-radius: 100%;
  color: #fff;
  cursor: pointer;
  
  aspect-ratio: 1 / 1;
  width: 48px;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

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

【讨论】：

【解决方案5】：

尝试将<span>-</span> 更改为<span style="position:relative; left:0px; top:-3px">-</span>。如果它看起来不正确，你可以玩弄它。

【讨论】：