0

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.

Photo of the present state

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>
MVS
  • 7
  • 6

3 Answers3

0

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!?

Kunal Tanwar
  • 1,209
  • 1
  • 8
  • 23
0

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>
-1

Add this styling

.buttonsform label {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
pullidea-dev
  • 1,768
  • 1
  • 7
  • 23