输入类型无线电垂直对齐

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