在一个圆圈内垂直和水平居中文本字符（CSS） [英] Center text character ☢ vertically and horizontally within a circle (CSS)

问题描述

我试图把这个文字字符放在一个圆圈内。 （&＃9762;）

当IE 10以垂直和水平为中心显示文本时，Chrome和Firefox都会在顶部填充太多的内容。 b
$ b

任何想法如何解决这个问题？ （Flexbox不是必须的）

HTML

 < div class =tl-icon> 
< div>☢< / div> 
< / div> 
  

CSS

  .tl-icon {
 align-items：center; 
背景：黑色; 
 border-radius：50％; 
颜色：黄色; 
 display：flex; 
 font-size：3em; 
 height：3rem; 
 justify-content：center; 
 width：3rem; 
 
 $ / code> 

在这里查看实时演示： http://codepen.io/dash/pen/ZYePWP

解决方案<

我添加了一个 line-height / code>这似乎修复了一下：

  .tl-icon div {
 line-高度：1px的; 
} 
  

http://codepen.io/anon/pen/ZYePBZ

I am trying to center this text character ☢ within a circle. (&#9762;)

While IE 10 displays the text vertically and horizontally centered, both Chrome and Firefox render too much padding at the top.

Any ideas how to fix this? (Flexbox is not a must have)

HTML

<div class="tl-icon">
<div>☢</div>
</div>

CSS

.tl-icon {
    align-items: center;
    background: black;
    border-radius: 50%;
    color: yellow;
    display: flex;
    font-size: 3em;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

See live demo here: http://codepen.io/dash/pen/ZYePWP

解决方案

The problem is that the inner child is a text which screws with your height.

I added a line-height which seems to fix it a bit:

.tl-icon div{
  line-height:1px;
}

http://codepen.io/anon/pen/ZYePBZ

这篇关于在一个圆圈内垂直和水平居中文本字符（CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！