随着字体大小的增加，文本在圆形按钮中偏心

Question

我需要构建一个圆形按钮...我已经看到很多答案...是的...它们都可以...但是我需要的按钮在 angular material 中占据整个 space 圆圈的图标...所以当我使用这些解决方案并增加图标的大小时，它变得不合适。

例如...使用中显示的相同解决方案以适应我的需要这是我使用的代码：

.btn-circle {
    border: 10px solid white;
    background-color: #444;
    /*background: #97c83e;*/
    width: 72px;
    height: 72px;
    border-radius: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    text-decoration: none;

    /*
    text-orientation:sideways;
    writing-mode: vertical-lr;
    */
    
    text-align: center;
    font-size: 55px;
    /*
    font-size: 35px;
    */
}

<a href="" class="btn-circle">
   &lsaquo;&lsaquo;
</a>

在这种情况下，将字体大小设置为 35px，一切看起来都很好。

我需要构建的按钮完全是这样的：

我还使用了 div 和显示 table 的方法，以及另一个 div 内部显示 table-cell 的方法，如 align-text-vertically 和同样的事情发生在我身上。

Answer 1

您需要注意的是，矢量对象（在本例中为 &lsaquo;）已在其上方和下方保存了额外的 alpha space。这样做是因为它是字体集的一部分，需要与其他字体字符正确对齐。

请参阅此示例，了解向量如何包含 space。只有S会被中心化。

例子

div {
  font-size: 55px;
  background:#ccc;
}

<div>Ss&lsaquo;y</div>

手动偏移

使用`line-height`、`margin`、`padding` 或绝对定位来手动偏移居中后的字体位置。

另请注意 align-items 控制儿童。 align-content 控制自己。

.btn-circle {
    background-color: #444;
    width: 72px;
    height: 72px;
    border-radius: 100%;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-content: center;
    color: white;
    font-weight: bold;
    font-size: 55px;
    line-height:60px;
}

<a href="" class="btn-circle">
   &lsaquo;&lsaquo;
</a>

Unicode 替代品

通过将 flex 内容设置为可以像 span 标签一样定位的控件，您将获得最佳控件。这样你就可以直接操作对象。在这种情况下，将其设置为填充其容器。

This unicode example is not ideal as it has some alpha space. You can find others here - https://unicode-table.com/

.btn-circle {
  background-color: #444;
  width: 72px;
  height: 72px;
  border-radius: 100%;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-circle span {
  color: white;
  font-size: 55px;
  height: 100%;
}

<a href="" class="btn-circle">
  <span>«</span>
</a>

SVG

我个人使用 svg 图标，它们已经是完美居中的矢量并且更易于使用。

I don't recommend linking svg's to independant files. I would use them inline. This is just an example.

.btn-circle {
  width: 72px;
  height: 72px;
  border-radius: 100%;
  display: flex;
  fill:#fff;
  background: #ddd url("https://www.svgrepo.com/show/361731/chevron-double-left.svg") no-repeat center center;
  background-size: 40px;
}

<a href="" class="btn-circle"></a>

随着字体大小的增加，文本在圆形按钮中偏心

the text is decentered in the circular button with the increase of the font size

html

css

button

例子

手动偏移

Unicode 替代品

SVG