在html容器里面的中心字体象

Question

我无法将橙色篮球置于此图标容器中心。您可以在此活动标题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;
}

Answer 1

这对我有用：

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

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

Answer 2

无论大小如何，您都可以使用以下内容进行居中：

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

顶部和左侧移动元素，使其左上角位于中心，然后变换将其向上移动高度的50％并保持其宽度的50％。

Answer 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