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