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所述，我尝试使用

调整角色的大小

字体大小

和

垂直对齐。

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

Answer 1

您可以使用多种方法进行水平和垂直居中。这就是我的选择：

＆＃13;

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

＆＃13;

<button class="btn btn-tool">
  <span></span>
</button>

＆＃13;

https://jsfiddle.net/g8skps53/8/

Answer 2

您可以删除vertical-align，而只需修改行高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;
}

Unicode字符对齐方式

2 个答案: