Unicode 字符对齐答案

【问题标题】：Unicode character alignmentUnicode 字符对齐
【发布时间】：2016-10-02 10:11:58
【问题描述】：

我想在按钮中心显示一个 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 所述，我尝试使用

调整字符大小

字体大小

和

垂直对齐。

从JSFiddle 中可以看出，对齐方式不理想（字符水平和垂直居中）。你能帮忙吗？

【问题讨论】：

记得点击它左边的复选标记来标记正确的答案。

标签： html css unicode

【解决方案1】：

您有多种方法可用于水平和垂直居中。这是我更喜欢的：

.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/

【讨论】：

如果我理解正确，您的代码是说 - 将 unicode 字符设置为 position: absolute 然后 top: 50% 表示将其降低父母身高的 50%，然后 tranform: translateY(-50%) 表示将其转换备份 50% 的 unicode 字符自身高度，这样如果父按钮更改大小，则 unicode char 将相应调整。这很好，也可以在不同的情况下使用......
您完全正确。这是垂直居中的标准方法之一（这在过去 25 年里一直很痛苦）。

【解决方案2】：

您可以删除垂直对齐，而只需修改行高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;
}

【讨论】：