logo标签列表

中心图标内容

csstwitter-bootstrapglyphicons
16

我正在使用Google Chrome Inspector，如果您选择glyphicon的before伪元素，您会发现右侧有空白。我该如何使glyphicon居中？

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

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

jsFiddle

更新的链接 jsFiddle 2

Glyphicon

更新链接 http://jsfiddle.net/sps01dsd/1/ - Almis
2
如果您在内联元素中尝试单个a-z字符，则可能是字形图标字体文件中的字距问题，您将看到它们正确地居中对齐。 - Luizgrs
@Luizgrs，你说得对，我相信大部分都是正确的，但有些不正确，如果你尝试使用glyphicon-minus，情况会更糟。我认为唯一的方法是手动调整。等待更好的解决方案。 - Almis
11个回答
9

我给伪元素设置了 letter-spacing，它起到了作用。我尝试更改 font-size，发现白色空格未出现。

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

可以使用以下链接查看完整的示例代码：http://jsfiddle.net/MasoomS/1z79r22y/

1
这是目前为止最好的答案。我会接受它，但还会等待几天来颁发奖励。 - Almis
4
我认为根本问题在于图标字体所使用的SVG文件。我以前曾经从SVG文件中制作过图标字体，看到了与您观察到的完全相同的现象。如果符号不在其SVG视口中心，那么您将得到一个偏离中心的字形。
开发代码解决方案将变得非常混乱，因为您必须单独考虑每个未居中的字形，然后您的偏移量必须相对于图标大小，以便偏移量与图标的 font-size 相应缩放。这当然是可行的，但似乎是一个棘手的维护问题。
我建议采取以下措施之一：
1.接受glyphicon集合的实际情况（即免费的图标字体），并接受它的不足之处。
2.寻找另外一个没有这个问题的图标字体–可以考虑购买许可证。
3.创建自己的图标字体，以确保所有的字形都居中。
2

Almis 你好。你的演示代码仅使用包含 glyphicon 的 span 元素，它没有设置 宽度 来居中显示。

一旦你像这样做了，它就能够居中显示。

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

这里有一个Fiddle。

图片描述

嗨，你的例子和我的完全一样，如果你拿尺子量一下，你会发现y轴完全相同。请查看更新后的jsfiddle以了解我的意思。 - Almis
抱歉，第一次没有理解清楚。我重新看了你的新代码片段，现在我明白你的意思了。看看这个FIDDLE。甚至加号和减号之间也有区别。正如你指出的那样，减号看起来左边有空格，而加号图标右边有空格。 - AngularJR
是的，我知道，如果我们无法做任何事情，那么这个glyphicons的作者应该修复它。 - Almis
嗨，我问了谷歌大叔，但没有找到关于这个的任何信息。 - AngularJR
1
你好 Almis。
.glyphicon {
      font-size: 120px;
      display: block;
      text-align: center;
    }

只需将 .glyphicon 类替换为上面的 CSS 代码即可。
享受吧..
没成功，请更新 jsfiddle 如果你认为它已经生效了。 - Almis
1
我通常使用max-width（如果要使列表中的所有图标具有相同的大小，则还需要使用width）来解决这类问题。
根据您提供的jsFiddle示例：
max-width:222px;

请看这里。
1
使用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;
}
1
这种问题只能通过“hack”的方式解决，原因是glyphicon本身并没有在其容器中居中，这意味着在设计时它没有完全居中。
你必须使用上述提到的技巧（字母间距、负边距等）来“hack”它，但这取决于分辨率。
然而，要使其垂直居中，您可以删除填充，并使用行高等于容器的高度。
1

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

1
"

vertical-align: middle; margin: 0 auto;应该能帮助你解决问题。

"
不工作，你能更新一下我的 jsfiddle 吗？也许是我做错了什么。 - Almis
1
只需将类名my-style-icon添加到图标中，并将以下内容添加到您的CSS中：
.my-style-icon {
    font-size: 120px;
    display: block;
    text-align:center;
}
这个 span 元素是居中的，但是伪元素 before 不是（我应该在问题中提到这一点）。 - Almis
请输入完整的代码，我在 jsfiddle 上只看到图标 HTML 和一些无用的 CSS。 - aleksandar
我没有做太多，我只是想把glyphicon居中放在一个框里，但由于它前面的伪元素，它看起来并不在中间。我可以使用填充或边距来解决这个问题，但我认为可能有更好的解决方案。请查看更新后的链接。 - Almis
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接