label(input type="radio") is not coming in center

user_18425610 0
Viewed 74

I want the label to come to the center of the screen. label mean circle. I've found many ways that verticle-align : middle , text-align: center ... but i can't find solution...

    .test_obj input[type="radio"] {
        display: none;
    }
 
    .test_obj input[type="radio"] + span {
        border-radius : 50%;
        display: inline-block;
        padding: 15px 15px;
        margin : 5px;
        border: 1px solid #dfdfdf;
        background-color: #ffffff;
        cursor: pointer;
        
    }
    .test_obj input[type="radio"]:checked + span {
        background-color: #113a6b;
        color: #ffffff;
    }
<label class="test_obj">
    <input type="radio" name="fruit" value="apple">
    <span class="align-items-center justify-content-center">사과</span>
</label>
 
<label class="test_obj">
    <input type="radio" name="fruit" value="banana">
    <span>바나나</span>
</label>
 
<label class="test_obj">
    <input type="radio" name="fruit" value="lemon">
    <span>레몬</span>
</label>

css html
3 Answers
.container-text {
 text-align: center;
}
<div class="container-text">
your text
</div>
user_184259640

Like this? Create a container and wrap all label with it. And assign display: flex; justify-content: center; to container

   .test_obj input[type="radio"] {
        display: none;
    }
 
    .test_obj input[type="radio"] + span {
        border-radius : 50%;
        display: inline-block;
        padding: 15px 15px;
        margin : 5px;
        border: 1px solid #dfdfdf;
        background-color: #ffffff;
        cursor: pointer;
        
    }
    .test_obj input[type="radio"]:checked + span {
        background-color: #113a6b;
        color: #ffffff;
    }
    
    .container{
    display:flex;
    justify-content: center;
    
    }
<div class = "container">
<label class="test_obj">
    <input type="radio" name="fruit" value="apple">
    <span class="align-items-center justify-content-center">사과</span>
</label>
 
<label class="test_obj">
    <input type="radio" name="fruit" value="banana">
    <span>바나나</span>
</label>
 
<label class="test_obj">
    <input type="radio" name="fruit" value="lemon">
    <span>레몬</span>
</label>
</div>

user_174089940

Input, Label are all inline elements. To center inline-elements you can wrap the elements with a block element and assign the CSS property text-align: center. That was is.

.input-container {
  text-align:center;
}   


.input-container {
  text-align:center;
}    

.test_obj input[type="radio"] {
  display: none;
}
 
.test_obj input[type="radio"] + span {
  border-radius : 50%;
  display: inline-block;
  padding: 15px 15px;
  margin : 5px;
  border: 1px solid #dfdfdf;
  background-color: #ffffff;
  cursor: pointer;
}
.test_obj input[type="radio"]:checked + span {
  background-color: #113a6b;
  color: #ffffff;
}
<div class="input-container">
  <label class="test_obj">
      <input type="radio" name="fruit" value="apple">
      <span class="align-items-center justify-content-center">사과</span>
  </label>

  <label class="test_obj">
      <input type="radio" name="fruit" value="banana">
      <span>바나나</span>
  </label>

  <label class="test_obj">
      <input type="radio" name="fruit" value="lemon">
      <span>레몬</span>
  </label>

</div>

user_148071110
Related