输入类型无线电垂直对齐

Question

如何垂直对齐这两个单选按钮
它们应该按 x 轴

对齐

.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>

Answer 1

此 CodePen 显示它们在左侧垂直对齐。这就是你所追求的吗？我将 grid-template-columns: auto auto; 更改为 grid-template-columns: 1fr;

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

Answer 2

由于文本在定义对齐方式方面发挥着作用，因此请确保您始终至少拥有类似的东西，例如具有相同属性的空伪元素：

.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>

输入类型无线电垂直对齐

input type radio vertical alignment

html

css

vertical-alignment