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字符对准

回答

相关问题