I'm programming two radio buttons for a form. For this buttons, I managed to include text inside and personalize them by using labels. However, when text is included (and although text-align=center;
is added) it keeps at the top of the button, instead of aligning both vertically and horizontally in the middle of the button. It is aligned horizontally.
Here is the code:
.buttonsform #locheck{ position:absolute; top:0px; left:0px; display:inline-block; border-radius: 40px; width: 190.47px; height: 45.96px; text-align: center; border: 1px solid #333333; font-family:Montserrat; font-style: normal; font-weight:500; font-size: 18.192px; line-height:22px; text-transform: uppercase; color:#333333; cursor:pointer; }.buttonsform #lpcheck{ position:absolute; top:0px; right:0px; border-radius: 40px; width: 190.47px; height: 45.96px; vertical-align: middle; text-align: center; border: 1px solid #333333; font-family:Montserrat; font-style: normal; font-weight:500; font-size: 18.192px; line-height:22px; text-transform: uppercase; color:#333333; cursor:pointer; }
<div class="buttonsform"> <input type="radio" name="odontologia" id="ocheck"> <input type="radio" name="podologia" id="pcheck"> <label for="ocheck" id="locheck">Odonotología</label> <label for="pcheck" id="lpcheck">Podología</label> </div>
Try this as I said use flexbox
.
* { margin: 0; padding: 0; outline: 0; box-sizing: border-box; } body { height: 100vh; display: grid; place-items: center; }.container { display: flex; flex-direction: row; }.container.option { display: flex; padding: 1rem; align-items: center; border-radius: 60px; border: 1px solid red; flex-direction: row-reverse; }.container.option:nth-child(2) { margin-left: 1rem; }.container.option label { margin-left: 0.5rem; }.container.option input:checked.option { background-color: green; }
<div class="container"> <div class="option"> <label for="option_1"> Odonotología </label> <input type="radio" id="option_1" /> </div> <div class="option"> <label for="option_2"> Podología </label> <input type="radio" id="option_2" /> </div> </div>
Let me know if this works??
I think you are looking for this.
.boxed label { display: inline-block; width: 210px; border-radius: 50px;important: padding; 10px: border, solid 1px rgb(43, 43; 43). }:boxed input[type="radio"] { display; none. }:boxed input[type="radio"]:checked + label { background-color, rgb(17, 173; 235); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <form class="boxed"> <input type="radio" id="cb1" name="skills" value="cb1"> <label for="cb1">Checkbox 1</label> <input type="radio" id="cb2" name="skills" value="cb2"> <label for="cb2">checkbox2 </label> </form> </body> </html>
Add this styling
.buttonsform label {
display: flex !important;
align-items: center;
justify-content: center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.