Question

我试图将这个文字字符center置于一个圆圈内。（＆amp;＃9762;）

虽然IE 10以垂直和水平居中的方式显示文本，但Chrome和Firefox在顶部渲染过多的填充。

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

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

点击此处观看现场演示：http://codepen.io/dash/pen/ZYePWP

Answer 1

问题在于内在的孩子是一个与你的身高相关的文本。

我添加了一个line-height，似乎有点修复它：

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

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

Answer 2

定位该子div，将其设置为inline-block并更改垂直对齐：

.tl-icon div{
  display: inline-block;
  vertical-align: top;
}

CODEPEN

Answer 3

我不得不放弃尺寸，但这应该垂直和水平居中，到目前为止在Chrome，FF和Safari中测试过。

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

将父级设置为

  display:table;

孩子到

 display:table-cell;
 vertical-align:middle;
 text-align:center;

Answer 4

您已经使用flexbox CSS正确完成了所有操作。

问题似乎与line-height有关。您正在使用html实体作为文本，看起来.tl-icon继承了行高不正常的值。

尝试调整line-height，并使用无单位值。这样，行高将计算为内部元素的字体大小。

.tl-icon {
    line-height:.9;
}

中心文本字符☢在圆圈内垂直和水平（CSS）

4 个答案: