在一个圆圈内垂直和水平居中文本字符 ☢ (CSS)答案

【问题标题】：Center text character ☢ vertically and horizontally within a circle (CSS)在一个圆圈内垂直和水平居中文本字符 ☢ (CSS)
【发布时间】：2015-03-15 06:23:27
【问题描述】：

我正在尝试将此文本字符 ☢ 在一个圆圈内居中。 (☢)

虽然 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

【问题讨论】：

这看起来像是您应该真正使用图像的情况。您正在尝试使用 CSS 的文本格式化工具来处理实际上是要放置在另一个图像中的图像。这是图形程序的用途。
在 Windows 7 的 Chrome 61.0.3163.100 上查看时，您的 codepen 演示看起来根本不居中。

标签： html css centering flexbox

【解决方案1】：

问题是内在的孩子是一个与你的身高有关的文字。

我添加了一个line-height，这似乎解决了一些问题：

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

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

【讨论】：

在 FFX34 和 Chrome 39 上看起来不错

【解决方案2】：

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

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

CODEPEN

【讨论】：

在 Firefox 34.0.5 和 35.0 上

【解决方案3】：

我不得不对尺寸放屁，但这应该垂直和水平居中，到目前为止在 Chrome、FF 和 Safari 中进行了测试。

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

将父级设置为

  display:table;

孩子到

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

【讨论】：

不在圆心
在呈现为文本时，浏览器之间可能存在微小的像素问题。如果您想对此进行调整，您将需要一些有条件的 css 来定位某些浏览器。我过去曾这样做过（例如，它是modernizr 中可用的功能）。但它看起来离我很近。我还尝试了标准文本，这似乎准确地居中。因此，您可以仅为 Firefox（或其他等）添加微小的填充或边距，但这需要更详细的答案。

【解决方案4】：

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

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

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

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

【讨论】：