中心文本字符 ? 圆内垂直和水平 (CSS)

Question

我试图将此文本字符 \xe2\x98\xa2 放在一个圆圈内。(☢)

\n\n

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

\n\n

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

\n\n

超文本标记语言

\n\n

<div class="tl-icon">\n<div>\xe2\x98\xa2</div>\n</div>\n

\n\n

CSS

\n\n

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

\n\n

请在此处查看现场演示：http://codepen.io/dash/pen/ZYePWP

\n

Answer 1

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

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

密码笔