html - Unicode 字符对齐

Question

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

调整字符大小

font-size

和

vertical-align.

在JSFiddle中可以看出, 对齐方式不理想(字符水平和垂直居中)。 你能帮忙吗？

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