Uncertain about which part to modify in this radio button code to decrease its size while keeping the text aligned with the inner button. Changes made have shifted the text to the top of the button instead. Can you provide guidance on the necessary adjustments to maintain alignment?
This is a large radio button
.button {
/* CSS styling for the button */
}
.button:hover .inner {
opacity: .5;
}
.button input {
display: none;
}
.button input:checked + .outer .inner {
opacity: 1;
}
.button .outer {
/* Outer circle style */
}
.button .inner {
/* Inner circle style */
}<div style="text-align: center;">
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
Add Details
</label>
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
Choice 2
</label>
</div>Struggling to center the text on the button after attempted modifications, seeking help to ensure proper alignment.
Updated HTML:
.button {
/* Adjusted CSS for the radio button */
}
.button:hover .inner {
opacity: .5;
}
.button input {
display: none;
}
.button input:checked + .outer .inner {
opacity: 1;
}
.button .outer {
/* Updated outer circle styles */
}
.button .inner {
/* Updated inner circle styles */
}<form id="form1" runat="server">
<div>
<br />
<br />
<div style="text-align: center;">
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
Add Details
</label>
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
Choice 2
</label>
<br />
<br />
<br />
<br />
</div>
<br />
</div>
</form>