Unicode字符對準

我想顯示在一個按鈕爲中心的Unicode字符，見Unicode字符對準

<div class="col-xs-1"> 
    <button class="btn btn-tool"> 
     <span></span> 
    </button> 
    </div> 

span:before { 
    font-family: "Arial Unicode MS"; 
    content: "\25cf"; 
    font-size: 3em; 
    vertical-align: middle; 
}

如上所述here，我試圖調整使用字符

字體大小

and

垂直對齊。

如在JSFiddle中可以看出的，對齊不是所希望的（字符以水平方向和垂直方向爲中心）。你能幫忙嗎？

來源

2016-10-02 Otto

請務必點擊了左邊的對勾標記正確的答案。 – connexo

您有可用於水平和垂直居中的幾種方法。這是我寧願：

.btn.btn-tool { 
 
    position: relative; 
 
    height: 200px; /* inserted height and width only for demonstration purposes */ 
 
    width: 80px; 
 
} 
 
span:before { 
 
    font-family: "Arial Unicode MS"; 
 
    content: "\25cf"; 
 
    font-size: 3em; 
 
    display: block; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    text-align: center; 
 
    width: 100%; 
 
}

<button class="btn btn-tool"> 
 
    <span></span> 
 
</button>

https://jsfiddle.net/g8skps53/8/

來源

2016-10-02 10:25:25 connexo

如果我理解正確，你的代碼是說 - 把unicode字符設置爲'position：absolute'，然後'top：50％'是說把它降低到父母高度的50％，然後'tranform：translateY（-50％） '是說把它移回50％的Unicode字符自身的高度，所以如果父按鈕更改大小的話，Unicode字符將相應地進行調整。那很好，也可以用在不同的情況下... –

你明白了吧。這是垂直居中的標準方法之一（過去25年來這一直是一個痛苦的屁股）。 – connexo

謝謝。這個很好地解決了我的問題。 – Otto

您可以刪除垂直對齊，而是剛剛修改的line-height https://jsfiddle.net/39a4grvh/

.btn-tool { 
    width: 30px; 
    height: 30px; 
    padding: 0; 
    background-color: #4f4f4f; 
    color: #a19d9d; 
    line-height: 0.5; 
} 

span:before { 
    font-family: "Arial Unicode MS"; 
    content: "\25cf"; 
    font-size: 3em; 
}

來源

2016-10-02 10:20:41

Unicode字符對準

回答

相關問題