中心glyphicon内容

Question

我使用Google Chrome Inspector，如果您选择glyphicon的伪伪，您会看到右边有空白区域。我怎样才能使glyphicon居中？

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

<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。它当然可行，但看起来像是一件令人头痛的事情。

我会推荐以下其中一项：

• 接受使用的glyphicon设置（免费图标字体）并使用其不完美之处
• 寻找另一个没有同样问题的图标字体 - 愿意支付许可费
• 创建自己的图标字体，以确保所有字形都居中

Answer 3

Almis 你好。您的演示代码仅使用 span持有其中没有宽度的glyphicon来居中。

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

<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

只需将类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

您好 Almis 。

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

只需用上面的css代码替换.glyphicon类。

享受..

Answer 7

正如你可以看到作者添加一些空格明显是一个问题，唯一解决这个问题的原因是手动设置宽度。

Answer 8

通过使用letter-spacing属性，您可以摆脱字形右侧的空白区域：

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

Answer 9

除了黑客之外不能以任何其他方式解决这个问题的原因是因为glyphicon本身并不是在它自己的容器中居中，这意味着当它在它的矩阵中被设计时它没有完全居中。

你必须用上面提到的shivs（字母间距，负边距等）“破解”它，但它取决于分辨率。

然而，要以垂直方向居中，您可以移除衬垫，并使用等于容器高度的线高

Answer 10

使用font-awesome，它＆＃39; +＆＃39;完美居中，没有问题。并使用display：flex on parent，结合margin：auto on child（即icon）。它导致完美对齐。 这是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;
}