中心字形内容

Question

我使用 Google Chrome Inspector，如果你 select 字形的前伪，你会看到右边有空的 space。我怎样才能使字形居中？

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

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

jsFiddle

已更新 link jsFiddle 2

Answer 1

只需将 class my-style-icon 添加到图标并将其添加到您的 CSS:

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

Answer 2

vertical-align: middle; margin: 0 auto; 应该可以满足您的需求。

Answer 3

Almis 你好。您的演示代码仅使用 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>

这里有一个Fiddle。

Answer 4

你好Almis.

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

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

享受..

Answer 5

你可以清楚地看到作者添加了一些白色的问题 space，解决这个问题的唯一原因是手动设置宽度。

Answer 6

你可以通过 letter-spacing 属性去掉字形右边的空 space:

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

Answer 7

我认为这里的根本问题在于构建图标字体的 SVG。我之前从 SVG 构建过图标字体并看到了完全相同的行为。如果符号未在其 SVG 中居中 viewbox，您会得到一个像您观察到的那样偏离中心的字形。

开发基于代码的解决方案会变得非常混乱，因为您必须单独考虑每个不居中的字形，然后您的偏移量必须与图标的大小相关，因此使用图标的 font-size 偏移比例。它当然是可行的，但它似乎是那种维护起来令人头疼的东西。

我会推荐以下其中一项：

接受 glyphicon 的现状（一种免费图标字体）并接受它的缺陷
寻找另一种没有同样问题的图标字体——愿意为许可付费
创建您自己的图标字体，这样您就可以确保所有字形都居中

Answer 8

我给了 letter spacing 伪元素，它成功了。我尝试更改 font-size，但我发现白色 space 没有出现。

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

工作fiddle：http://jsfiddle.net/MasoomS/1z79r22y/

Answer 9

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

根据您的 jsFiddle：

max-width:222px;

参见here。

Answer 10

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

您将不得不 'hack' 使用上述 shivs（字母间距、负边距等），但它取决于分辨率。

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

Answer 11

使用font-awesome，'+'完美居中，没有字距问题。并在父项上使用 display:flex，并在子项（即图标）上结合使用 margin:auto。它导致完美对齐。这是 jsfiddle(http://jsfiddle.net/Rpad/sps01dsd/13/)

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

HTML:
<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;
}

中心字形内容

Center glyphicon content

css

twitter-bootstrap

glyphicons