输入类型无线电垂直对齐

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 {&nbsp; display: grid;&nbsp; grid-template-columns: auto auto;&nbsp; background: orange;}input[type='radio'] {&nbsp; margin: 0 9px;&nbsp; /*vertical-align: middle; change this to what you want to control the alignment */}.bbtn {&nbsp; display: inline-block;&nbsp; line-height: 25px;}.wrap> div::after{&nbsp; content:"";&nbsp; line-height:25px; /* the same as the one used with bbtn */}<div class='wrap'>&nbsp; <div>&nbsp; &nbsp; <input type='radio' name='aradio' value='a' checked>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <input type='radio' name='aradio' value='b'>&nbsp; &nbsp; <div class='bbtn'>LOREM</div>&nbsp; </div></div>

Answer 2

此 CodePen 显示它们在左侧垂直对齐。这就是你所追求的吗？我grid-template-columns: auto auto;改为grid-template-columns: 1fr;https://codepen.io/gunderodd/pen/abOGzpO