中心字形内容

Question

我使用 Google Chrome Inspector，如果您选择字形图标的前伪，您将看到右侧有空白区域。如何使字形居中？

我尝试设置文本对齐，但不起作用。

<span class="glyphicon glyphicon-plus"></span>
<style>.glyphicon { font-size: 120px; }</style>

jsFiddle

更新了链接jsFiddle 2

Answer 1

我给了

letter spacing

作为伪元素，它成功了。我尝试更改

font-size

，发现没有出现空白。

.glyphicon:before{
   letter-spacing: -0.085em;
 }

工作小提琴：http://jsfiddle.net/MasoomS/1z79r22y/

Answer 2

我相信这里的根本问题在于构建图标字体的 SVG。我之前已经从 SVG 构建了图标字体，并且看到了完全相同的行为。如果符号没有在其 SVG

viewbox

内居中，您会得到一个像您观察到的那样偏离中心的字形。

开发基于代码的解决方案会变得非常混乱，因为您必须单独考虑每个不居中的字形，然后您的偏移量必须相对于图标的大小，以便偏移量随图标的大小而缩放图标的

font-size

。这当然是可行的，但维护起来似乎很麻烦。

我会推荐以下其中一项：

• 接受字形集的本来面目（免费图标字体）并接受它的缺陷
• 寻找另一种没有同样问题的图标字体——愿意支付许可证费用
• 创建您自己的图标字体，这样您就可以确保所有字形都居中

Answer 3

阿尔米斯你好。您的演示代码仅使用 just

span

持有字形图标，它没有 Width 居中。

一旦你做了这样的事情，它就会居中。

<div class="text-center">
<span class="glyphicon glyphicon-plus"></span>
</div>
<br>
<span class="glyphicon glyphicon-plus col-xs-12 text-center"></span>

这是一个小提琴。

Answer 4

只需将类

my-style-icon

添加到图标并将其添加到您的 CSS 中：

.my-style-icon {
    font-size: 120px;
    display: block;
    text-align:center;
}

Answer 5

vertical-align: middle; margin: 0 auto;

应该适合你。

Answer 6

你好阿尔米斯。

.glyphicon {
      font-size: 120px;
      display: block;
      text-align: center;
    }

只需将 .glyphicon 类替换为上面的 css 代码即可。

享受..

Answer 7

正如您所看到的，作者添加了一些空白显然是一个问题，解决此问题的唯一原因是手动设置宽度。

Answer 8

您可以通过使用

letter-spacing

属性来消除字形右侧的空白区域：

.glyphicon {
    font-size: 120px;
    letter-spacing: -9px;
}

Answer 9

我通常使用 max-width （和宽度，如果我希望列表中的所有图标具有相同的大小）来处理此类问题。

根据你的jsFiddle：

max-width:222px;

请参阅此处。

Answer 10

除了黑客之外，无法以任何其他方式修复此问题的原因是因为字形本身并未在其自己的容器内居中，这意味着当它在其矩阵中设计时，它并未完全居中。

您必须使用上述的 shivs（字母间距、负边距等）来“破解”它，但这取决于分辨率。

但是，要使其垂直居中，您可以删除填充，并使用等于容器高度的行高

Answer 11

使用

font-awesome

，它的

+

完全居中，没有字距调整问题。在父项上使用

display:flex

，并在子项上使用

margin:auto

（即图标）。从而实现完美对齐。
这是jsFiddle

HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div class="container">
    <div class="row">
        <div id="add" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
            <i class="fa fa-plus"></i>
        </div>
    </div>
</div>

CSS：

.fa-plus {
   margin: auto;
   font-size: 10em;
}
#add {
   border: 5px dashed black;
   border-radius: 25px;
   display: flex;
}