HTML & CSS Text align on small button

[Deleted member 2829]

I'm struggling to get a tiny button on my page to look exactly the way I want it to. Unfortunately I'm one of these OCD types who cannot rest before everything is absolutely pixel-perfect 🤣.
The button has the text X and I want the X to fit snugly inside the area. Initially I had this styling

#btnclearfilter
{
    width               : 19px;
    height              : 19px;
    font-size           : 19px;
    font-weight         : bold;
    color               : red;
}

but then the button X is half outside the button both horizontally and vertically. I've done much experimenting, using any number of CSS tips I could find, but the best I could achieve is this:

#btnclearfilter
{
    width               : 19px;
    height              : 19px;
    font-size           : 19px;
    font-weight         : bold;
    color               : red;
    padding-left        : 0px;
    padding-top         : 0px;
}

which looks as follows



The padding-left : 0px; nicely fits the X horizontally, but the padding-top : 0px; doesn't do as much - only shifts the X a few pixels upward.
Damn, this is annoying. Any ideas would be appreciated !

 

[Johna]

Could I see the html for that button?

 

[Deleted member 2829]

Could I see the html for that button?

Nothing interesting:

<button id="btnclearfilter" onclick="setFilter('')">X</button>

 

[BGB]

If you will add this two lines it will align the X vertically. Don't know you want to use it or not -

display: inline-flex;
align-items: center;

#btnclearfilter
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width               : 19px;
    height              : 19px;
    font-size           : 19px;
    font-weight         : bold;
    color               : red;
}

 

[Deleted member 2829]

If you will add this two lines it will align the X vertically. Don't know you want to use it or not -

#btnclearfilter
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width               : 19px;
    height              : 19px;
    font-size           : 19px;
    font-weight         : bold;
    color               : red;
}

That is great, many thanks !!

First, I found the font also matters. After changing it, things were a little better but not good enough. Your suggestions (those were things I had NOT tried yet) made it almost perfect. Adding a little top padding and slightly decreasing the font size made it perfect:



Final styling:

#btnclearfilter
{
    width               : 19px;
    height              : 19px;
    font-family         : arial;
    font-size           : 18px;
    font-style          : normal;
    font-weight         : bold;
    color               : red;
    background-color    : white;
    display             : inline-flex;
    align-items         : center;
    justify-content     : center;
    padding-top         : 3px; 
}

Ha ! Everything pixel perfect !! I can die a happy man now 😄

But sheesh, there's enough CSS styling options (justify, align, center, flex, padding, margin...) to make me dizzy. In hindsight, finding a suitable background image would have been less hassle 🙄