html - Center text not working -


i have span text, , div wrapping it. i'm trying center text in span. tried using flexbox center it, it's not working. it's centered horizontally not vertically. doing wrong, , how can fix it?

(the reason span there, can center text. if can center text without using span, 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>

your problem &#155; character of monospace font not vertically aligned, need play dimensions bit make work.

check 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