CODEWITHSUNDEEP
htmlcssvertical-alignment
qadenza
qadenza

Reputation: 9293

input type radio vertical alignment

how to align vertically these two radio buttons
they should be aligned by x axes

.wrap{
display:grid;
grid-template-columns:auto auto;
background:orange;
}

input[type='radio']{
	display:inline-block;
	margin:0 9px;
	line-height:25px;
	vertical-align:middle;
}

.bbtn{
	display:inline-block;
	line-height:25px;
}
<div class='wrap'>
<div>
<input type='radio' name='aradio' value='a' checked>
</div>
<div>
<input type='radio' name='aradio' value='b'>
<div class='bbtn'>LOREM</div>
</div>
</div>

Upvotes: 0

Views: 97

Answers (2)

Temani Afif
Temani Afif

Reputation: 272919

Since the text is playing a role in defining the alignment make sure you will always have at least a similar thing like an empty pseudo element with the same properties:

.wrap {
  display: grid;
  grid-template-columns: auto auto;
  background: orange;
}

input[type='radio'] {
  margin: 0 9px;
  /*vertical-align: middle; change this to what you want to control the alignment */
}

.bbtn {
  display: inline-block;
  line-height: 25px;
}

.wrap> div::after{
  content:"";
  line-height:25px; /* the same as the one used with bbtn */
}
<div class='wrap'>
  <div>
    <input type='radio' name='aradio' value='a' checked>
  </div>
  <div>
    <input type='radio' name='aradio' value='b'>
    <div class='bbtn'>LOREM</div>
  </div>
</div>

Upvotes: 2

granby
granby

Reputation: 90

This CodePen shows them aligned vertically on the left hand side. Is this what you are after? I changed grid-template-columns: auto auto; to grid-template-columns: 1fr;

https://codepen.io/gunderodd/pen/abOGzpO

Upvotes: 0

Related Questions