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

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 >
    <input type="radio" name="fruit" value="apple">
    <span >사과</span>
</label>
 
<label >
    <input type="radio" name="fruit" value="banana">
    <span>바나나</span>
</label>
 
<label >
    <input type="radio" name="fruit" value="lemon">
    <span>레몬</span>
</label>

CodePudding user response：

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 >
    <input type="radio" name="fruit" value="apple">
    <span >사과</span>
</label>
 
<label >
    <input type="radio" name="fruit" value="banana">
    <span>바나나</span>
</label>
 
<label >
    <input type="radio" name="fruit" value="lemon">
    <span>레몬</span>
</label>
</div>

CodePudding user response：

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 >
  <label >
      <input type="radio" name="fruit" value="apple">
      <span >사과</span>
  </label>

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

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

</div>

CodePudding user response：

.container-text {
 text-align: center;
}
<div >
your text
</div>