html容器內部的中心字體圖標

我在將圖標容器中的橙色籃球中心置於困境。您可以通過此鏈接查看此活動的標題Website。正如你所看到的，籃球不會保持中心。如果我增加字體的大小，它也會啓動。另外，如果你往下看頁面的底部，我實際上有相同的設置，除了字體稍大，但看起來很好。即使我放大字體大小，這應該工作。html容器內部的中心字體圖標

enter image description here

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

來源

2015-02-07 Mike Flynn

你的網站鏈接是本地主機。 – 2015-02-07 15:04:57

謝謝先生，更新了生活。 – 2015-02-07 15:13:10

這爲我工作：

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

在你的CSS中，它已經設置爲正常。

來源

2015-02-07 16:03:07 optimus203

如果我放大字體大小，這會一直工作嗎？ – 2015-02-07 17:15:29

可以使用類似下面的無論居中大小：

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

的頂部和左側所以它的左上角是在中心移動的元素，然後通過50變換移動起來其高度的百分之五十，其寬度的50％。

來源

2015-02-07 16:04:18 bobdye

更改此：

[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

來源

2015-02-07 16:08:34 Gradevole

html容器內部的中心字體圖標

回答

相關問題