Issue
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>
Solution
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>
Answered By - Maik Lowrey
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.