Kevin Powell - Community•16mo ago

Vertically centering a number

I'm trying to center the numbers in these labels, but struggling to figure out how to deal with the little extra space on the bottom of the glyph (if that is the right term?). I'm guessing I'm over complicating this... any tips on how to get the number in the center of the circle? I've tried putting flex on the label and tinkering around with "vertical-align" on both the label and its parent.

      <fieldset class="radio-container">
        <div class="radio">
          <input type="radio" id="1" value="1" name="rating">
          <label for="1" class="circle">1</label>
        </div>
        <div class="radio">
          <input type="radio" id="2" value="2" name="rating">
          <label for="2" class="circle">2</label>
        </div>
        <div class="radio">
          <input type="radio" id="3" value="3" name="rating">
          <label for="3" class="circle">3</label>
        </div>
        <div class="radio">
          <input type="radio" id="4" value="4" name="rating">
          <label for="4" class="circle">4</label>
        </div>
        <div class="radio">
          <input type="radio" id="5" value="5" name="rating">
          <label for="5" class="circle">5</label>
        </div>
      </fieldset>

      <fieldset class="radio-container">
        <div class="radio">
          <input type="radio" id="1" value="1" name="rating">
          <label for="1" class="circle">1</label>
        </div>
        <div class="radio">
          <input type="radio" id="2" value="2" name="rating">
          <label for="2" class="circle">2</label>
        </div>
        <div class="radio">
          <input type="radio" id="3" value="3" name="rating">
          <label for="3" class="circle">3</label>
        </div>
        <div class="radio">
          <input type="radio" id="4" value="4" name="rating">
          <label for="4" class="circle">4</label>
        </div>
        <div class="radio">
          <input type="radio" id="5" value="5" name="rating">
          <label for="5" class="circle">5</label>
        </div>
      </fieldset>

css 
/* forms */

fieldset {
    border: none;
}

.radio-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.radio {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

label {
    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--clr-medium-gray);
    font-size: var(--fs-500);
    vertical-align: middle;
}

input[type="radio"] {
    /* display: none; */
    position: absolute;
    width: 1em;
    height: 1em;
    opacity: 00%;
    margin: 0;
}

input[type="radio"]:checked+label {
    background-color: var(--clr-primary);
    color: var(--clr-white);
}

css 
/* forms */

fieldset {
    border: none;
}

.radio-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.radio {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

label {
    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--clr-medium-gray);
    font-size: var(--fs-500);
    vertical-align: middle;
}

input[type="radio"] {
    /* display: none; */
    position: absolute;
    width: 1em;
    height: 1em;
    opacity: 00%;
    margin: 0;
}

input[type="radio"]:checked+label {
    background-color: var(--clr-primary);
    color: var(--clr-white);
}

19 Replies

Mannix•16mo ago

line-height: 1; ???

doki3OP•16mo ago

ah, I did try line-height: 1; as well, forgot to mention that.

doki3OP•16mo ago

I do have the actual radio input overlapping the same label at 0% opacity, not sure if that does anything weird, but changing that input to display:none didn't fix it either.

b1mind•16mo ago

mmmm I want to say there is a CSS property to make it more like monospaced https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric but that would only handle the inline not the block? 🤔 honestly this is when I just reach for a 1px margin top (block-start) 😂 or some visual hacky solution yea idk guess I can't find what I thinking of, swear there was something else besides for variant line-height: 80% might work too xD (play with % value)

13eck•16mo ago

The issue you're having is that the line height also includes space for descenders (as is found in g, y, q, p, etc). At present, I don't know of any CSS property that you can use to remove it. You could, however, use an image instead of a number and the image will be perfectly centered as images don't have decenders :p

Caio Marcellus•16mo ago

@doki3 I think I can help you. DO you have your project deployed somewhere for me to make some tests?

doki3OP•16mo ago

ah, not yet. let me push it to github https://johncraven.github.io/fem-rating/

Caio Marcellus•16mo ago

Sorry, the best solution I came up with was using padding-top .25em

megaByte•16mo ago

remove line-height

Caio Marcellus•16mo ago

Doesnt solve it 😦

doki3OP•16mo ago

no worries, thanks for checking it out. I might just close this for now

b1mind•16mo ago

sideNote: Probably not a big deal but I notice you are styling the label, personally I would style the parent div. Then leave the label as just text. In my mental this is why I would have use margin-top vs padding

b1mind•16mo ago

just more flexible approuch imo 🤷‍♂️ oh but it does not style the radio lol nvm sorry >.>;; #depends CSS amr xD

megaByte•16mo ago

bro why isnt that shit centering i cant figure it out wtf

13eck•16mo ago

bro ☝️ 😉

megaByte•16mo ago

hmmm that makes sense

megaByte•16mo ago

now i cant figure out why it is centering in tailwind😭 💀

Gaming

Programming

Vertically centering a number