Jessica Jessica - 3 months ago 16
CSS Question

Center text not working

I have a

span
with text, and a
div
wrapping it. I'm trying to center the text in the
span
. I tried using
flexbox
to center it, but it's not working. It's centered horizontally but not vertically. What am I doing wrong, and how can I fix it?

(The only reason
span
is there, is so I can center the text. If I can center the text without using the
span
, then I won't use it.)

JSFiddle





#headerScrollDown {
font-size: 85px;
font-family: monospace;
border: 2px solid black;
border-radius: 50%;
width: 75px;
height: 75px;
display: flex;
align-items: center;
justify-content: center;
}

<div id="headerScrollDown"><span>&#155;</span>
</div>




Answer

Your problem is that the &#155; character of the monospace font is not vertically aligned, so you need to play with the dimensions a bit to make it work.

Check this example:

#headerScrollDown {
  font-size: 85px;
  font-family: monospace;
  border: 2px solid black;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#headerScrollDown span {
  line-height: 75px;
  margin-top: -5px;
}
<div id="headerScrollDown"><span>&#155;</span>
</div>

Comments