I want to center radio button text vertically.
problem is, sometimes the text occupy two lines and sometimes one line only.
I can't find a css solution to centre text vertically for both one line and two lines.
I am using bootstrap, my html code is
.form-check {
top: 13.33333px;
min-height: 85px;
cursor: pointer;
background-color: #e2e2e2;
padding: 10px 45px;
font-size: 1.4em;
margin-top: 1em;
}
.form-check .form-check-input {
margin-top: 1em;
}
<div class="container">
<div class="row spacerow mt-3">
<div class="col-lg-12 col-md-12 col-sm-12 col-12 mt-2">
<div>Questions
</div>
<div class="row align-items-center">
<div class="col-lg-6 col-md-6 col-sm-12 col-12 mt-2">
<div class="form-check">
<input type="radio" class="form-check-input" id="one" name="One" value="1" checked>One line sentence
<label class="form-check-label" for="One"></label>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12 mt-2">
<div class="form-check">
<input type="radio" class="form-check-input" id="One" name="One" value="1" checked>Two lines radio buttons text which is centered inside form-check div
<label class="form-check-label" for="One"></label>
</div>
</div>
</div>
</div>
</div>
</div>
Screenshot of layout
Please help me to center the text in one line vertically.
thanks