输入类型单选垂直对齐答案

【问题标题】：input type radio vertical alignment输入类型单选垂直对齐
【发布时间】：2020-03-15 18:41:41
【问题描述】：

如何垂直对齐这两个单选按钮
它们应该由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>

【问题讨论】：

您必须更好地解释您的意思 它们应该与 x 轴对齐
@AnuragSrivastava - 所以x 轴是水平轴。还有什么需要解释的？
您的代码输出也在水平轴上。那么你的问题是什么？
他只问如何（而不是为什么），你有答案吗？ @AnuragSrivastava
我不清楚这个问题，所以不，我没有答案

标签： html css vertical-alignment

【解决方案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>

【讨论】：

似乎是一个黑客解决方案。如果没有正常的方法... - 难以置信
@qadenza 这不是hacky，您正在处理不同的容器，因此两者之间没有关系。如果您想拥有相同的对齐方式，则需要在两者中具有相同的条件。
you are dealing with different container - 请解释一下 - 第一个收音机是收音机，第二个收音机是收音机 - 所以相同的元素。第一个父级是 div，第二个父级是 div - 所以是同一个容器。
@qadenza 相同类型的父级但不同的父级。您有 2 个 Div，因此有两个不同容器，每个输入都在一个容器内。因此，两者不在同一个世界中，并且在其中一个容器中，我们有使两个容器不同的文本（我们没有相同的条件）。文本会影响对齐方式，所以你不能说两者的条件相同，这就是为什么我添加了一个空的伪元素以确保我们有相同的条件

【解决方案2】：

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

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

【讨论】：

它们应该由x而不是y轴对齐
将text-align: center; 添加到.wrap 类怎么样？
更重要的是，你试过了吗？
我不用试，明明不行