代码之家 › 专栏 › 技术社区 › Asamartino

React/CSS中圆形按钮不垂直居中

css

Asamartino · 技术社区 · 6 月前

我正在构建一个React应用程序,我有一个表,在那里我渲染了一个Add Coin按钮。该按钮是一个圆形链接,带有 + + 未垂直居中 在圆圈内(向下移动)。我尝试了几种修复方法,但似乎都不起作用。

以下是相关代码:

<td>
  <a
    href={`/analysis?coin=${encodeURIComponent(coin.name)}&apiId=${encodeURIComponent(coin.data?.coin_id || '')}&ticker=${encodeURIComponent(coin.ticker)}`}
    target="_blank"
    rel="noopener noreferrer"
    className="result_table_add-coin-link"
    title="Add this coin"
  >
    +
  </a>
</td>

.result_table_add-coin-link {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  background: var(--color-g1);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1.5em;
  font-weight: bold;
  transition: all 0.2s ease;
  cursor: pointer;
  line-height: 1;
  line-height: 32px; /* I tried both */
}

.result_table_add-coin-link:hover {
  background: var(--color-g2);
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

检查元件显示:

.result_table_add-coin-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 32px;
  border-radius: 50%;
  background: var(--color-g1);
  color: white;
  text-decoration: none;
}

line-height: 1
line-height: 32px
transform: translateY(-1px)

+ 仍然没有视觉上居中。

其他相关CSS:

* { margin: 0; padding: 0; box-sizing: border-box; }

.filter .results-table td { color: #1a1a1a; }

.filter .results-table { border-collapse: collapse; }

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

:root {
  --color-g1: #38b2ac;
  --color-g2: #2c7a7b;
}

反应18
display: flex; align-items: center
字体:Inter
+

问题:

+ 即使使用flexbox,符号也不会垂直居中于圆圈中?我如何使它在浏览器中完全居中,而无需手动调整 translateY

1 回复 | 直到 6 月前

A Haworth 6 月前

不同的字体可能会以不同的方式定位+符号。

如果你自己画标志,你会有更多的控制权。

<style>
  :root {
    --color-g1: blue;
    --color-g2: green;
  }

  .result_table_add-coin-link {
    box-sizing: border-box;
    display: flex;
    --d: 32px;
    /* diameter of the circle */
    width: var(--d);
    height: var(--d);
    background-color: var(--color-g1);
    border-radius: 50%;
    transition: all 0.2s ease;
    cursor: pointer;
    background-image: linear-gradient(white, white), linear-gradient(white, white);
    --w: 2px;
    --h: calc(var(--d) / 2);
    background-size: var(--w) var(--h), var(--h) var(--w);
    background-position: center center;
    background-repeat: no-repeat;
  }

  .result_table_add-coin-link:hover {
    background-color: var(--color-g2);
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
</style>
<a class="result_table_add-coin-link" href=""></a>