在 CSS 中使 space 相等的多个输入元素居中

Question

我有一些带有文本的单选按钮。我怎样才能将所有这些东西居中，以便第一个按钮与最后一个输入的 P 的最后一个字母的 'margin-right' 相同 'margin-left'？

HTML

<div class='someClass'>
    <input type='radio' name='someName'>example
    <input type='radio' name='someName'>other text
</div>

CSS

.someClass{
    width:400px}

.someClass input{
    float:left}

Answer 1

首先，您的标记无效。输入是空元素，因此它们不能有任何内容。

然后，要居中，您可以尝试 flexbox 的 justify-content: center。

.someClass {
  display: flex;
  justify-content: center;
}

<div class='someClass'>
  <label>
    <input type='radio' name='someName' />
    example
  </label>
  <label>
    <input type='radio' name='someName' />
    other text
  </label>
</div>

Answer 2

您可以对元素使用 display: inline-block 以将主题放在一行中，仍然为它们保留宽框模型属性，如边距、填充等：

.someClass{
  text-align: center;
}
.someClass .inputs{
  display: inline-block; 
}

<div class='someClass'>
    <p class="inputs"><input type='radio' name='someName'>example</p>
    <p class="inputs"><input type='radio' name='someName'>other text</p>
</div>

在 CSS 中使 space 相等的多个输入元素居中

Centering multiple input elements with equal space in CSS

css

center

radio