Otto Otto - 2 months ago 25
CSS Question

Unicode character alignment

I want to display a unicode character centered in a button, see

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


As described here, I tried to resize the character using


font-size


and


vertical-align.


As can be seen in the JSFiddle, the alignment is not as desired (character centered both horizontically and vertically).
Can you please assist?

Answer

You have several methods available for horizontal and vertical centering. Here's what I would prefer:

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

Comments