在 html 容器内居中字体图标答案

【问题标题】：Center font icons inside a html container在 html 容器内居中字体图标
【发布时间】：2015-02-07 15:03:21
【问题描述】：

我无法在此图标容器中居中放置橙色篮球。您可以通过此事件标题中的链接查看它，Website。如您所见，篮球不会保持居中。如果我创建字体的大小，它也会开始。此外，如果您向下看页面底部，我实际上有相同的设置，除了字体稍大但看起来还不错。即使我放大字体大小，这也应该有效。

HTML

<a title="MAYB Sanctioned Event" rel="nofollow" href="#mayb-sanctioned" class="btn"><i class="icon-ebt-container"><i class="icon-ebt-maybback"></i><i class="icon-ebt-maybmiddle"></i><i class="icon-ebt-maybfront"></i></i></a>

CSS

.icon-ebt-container {
    position: relative;
}
.icon-ebt-maybfront:before {
    color: #003F5F;
    content: "\69";
}

.icon-ebt-maybmiddle:before {
    color: #000000;
    content: "\70";
    position: absolute;
    left:0;
    top: -2px;
}

【问题讨论】：

您的网站链接是本地主机。
谢谢大佬，更新到live了。

标签： html css fonts icons

【解决方案1】：

这对我有用：

[class^="icon-"], [class*=" icon-"] {
    line-height:17px;
}

在您的 CSS 中，您已将其设置为正常。

【讨论】：

【解决方案2】：

无论大小如何，您都可以使用以下方式居中：

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

top 和 left 移动元素，使其左上角位于中心，然后 transform 将其向上移动其高度的 50%，向左移动其宽度的 50%。

【讨论】：

【解决方案3】：

改变这个：

[class^="icon-"], [class*=" icon-"] {
    display: inline;
    width: auto;
    height: auto;
    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    margin-top: 0;
}

与：

[class^="icon-"], [class*=" icon-"] {
    display: inline;
    width: auto;
    height: auto;
    line-height: 16px;
    vertical-align: baseline;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    margin-top: 0;
}

结果：http://prntscr.com/6270fx

【讨论】：