0

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

enter image description here

Please help me to center the text in one line vertically.

thanks

David Thomas
  • 249,100
  • 51
  • 377
  • 410
Rahul B
  • 71
  • 6

0 Answers0