Unicode выравнивание символов

Question

Я хочу, чтобы отобразить юникод символы, расположенные в центре кнопки, см

<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, я попытался изменить размер символа, используя

размера шрифта

и

вертикально-выровнять.

Как видно из JSFiddle, выравнивание не по желанию (символ центрирован как по горизонтали, так и по вертикали). Не могли бы вы помочь?

Answer 1

У вас есть несколько методов, доступных для горизонтального и вертикального центрирования. Вот что я предпочел бы:

.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/

Answer 2

Вы можете удалить вертикальную выравнивать и вместо того, чтобы просто изменить высоту строки 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; 
}