输入类型无线电垂直对齐

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

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

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

Answer 2

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

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

Answer 3

您使用的显示类型为“网格”，因此您的数据按单元格显示。只需从grid-template-columns属性中删除一个“自动”