css。在标签内居中文本，但忽略输入答案

【问题标题】：css. centering text inside a label, but ignore the inputcss。在标签内居中文本，但忽略输入
【发布时间】：2017-05-22 08:16:20
【问题描述】：

所以我基本上有一个label 和这样的文字：

<label class="labelClass"> for="something">
    <input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
    Some text inside the label.
</label>

请注意，这只是一个example，不用于任何其他方式。

所以我可以并且知道如何拨打此label 和input，但他们一直看起来像这样：

我已经试过了：

margin-right
padding & padding-right
text-align:center

如以下css 示例：

.page-to-the-css label.something.option {
    margin-right:20px;
    padding-right:20px;
    text-align:center;
}

还有radio 按钮：

.page-to-the-css input.something.inputClass {
    margin-right:20px;
    padding-right:20px;
    text-align:center;
}

希望有人能帮我解决这个问题。

注意：我也不能触摸jquery、javascript 或除css 之外的其他任何东西，所以请保持在css。

更新：当前的任何答案都不起作用，VilleKoo 的答案也不起作用。

编辑：这是它发生的形式：form 这个网站是drupal，所以我无法联系到html，或者遗憾的是我无法为你们提供任何code。我希望这个问题可以通过任何方式解决。

【问题讨论】：

您需要向我们提供不起作用的 css - 因为您的代码目前是这样，它不会像您在图片中显示的那样显示。帮助我们重现问题，以便我们帮助您解决它 - 请参阅minimal reproducible example。我目前看到的唯一问题是您的标签关闭得有点早
@KingReload 我们需要代码来复制您当前的错误。如果您不向我们提供，那么我们无法为您提供帮助，请阅读我在上述评论中提供的链接，然后再次尝试编辑
您已经为输入元素声明了 3 倍的边距。
我的意思是你在这里和那里声明了保证金，它压倒了你想要实现的目标。这就是你现在正在做的事情：jsfiddle.net/VilleKoo/59cm3k76
你不能去掉那个margin-left: 0px吗？

标签： css drupal

【解决方案1】：

这应该适合你。

label {
  display: block;
}

input { 
  display: inline-block; 
  margin-right: 0.5rem;
}

<label id="labelID" for="something">
    <input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
    Some text inside the label.
</label>
<label id="labelID" for="something">
    <input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
    Some text inside the label.
</label>

【讨论】：

【解决方案2】：

看我的例子，很简单

.labelClass {
	position: relative;
	display: block;
	text-align: center;
	padding-left: 20px;
}

.labelClass .inputClass {
	position: absolute;
	left: 0;
}

<label class="labelClass" for="something">
    <input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
    Some text inside the label.
</label>

【讨论】：

【解决方案3】：

许多 HTML 元素都有默认的边距设置。您可以覆盖它并将其设置为 0。在您的情况下，您希望在单选按钮上重置 margin-right：

<input type="radio" name="beds" value="1" style="margin-right: 0" />

您可能希望将它添加到您的样式表中，以便它适用于所有单选按钮：

input[type="radio"] {
  margin-right: 0;
}

【讨论】：

你需要检查所有调用它的 css 类