为什么这些按钮没有正确居中？中间按钮不在标题下方居中，例如[重复]答案

【问题标题】：Why are these buttons not properly centred? The middle button is not centred under the title for example [duplicate]为什么这些按钮没有正确居中？中间按钮不在标题下方居中，例如[重复]
【发布时间】：2020-11-09 02:25:24
【问题描述】：

我正在尝试和我的朋友一起为电影之夜制作一个投票网站，但我对 html/css 不是很感兴趣。我使用 w3schools 和一些试验和错误来获得 5 个水平设置的单选按钮，文本居中位于各个按钮上方。

问题是中间按钮没有以框本身的标题居中。另一种理解方式是左边缘和第一个单选按钮之间的间隙与最后一个按钮和右边缘之间的间隙大小不同。

#but {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

#pair {
  display: inline-block;
  width: 20%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

<fieldset class="pollbox" style="white-space: nowrap;">
  <legend align="center">Film Name</legend>
  <div id="pair">
    <label for="-2">Trash</label>
    <input type="radio" name="filmname" value="-2" id="but">
  </div>
  <div id="pair">
    <label for="-1">Dislike</label>
    <input type="radio" name="filmname" value="-1" id="but">
  </div>
  <div id="pair">
    <label for="0">Neutral</label>
    <input type="radio" name="filmname" value="0" id="but">
  </div>
  <div id="pair">
    <label for="1">Like</label>
    <input type="radio" name="filmname" value="1" id="but">
  </div>
  <div id="pair">
    <label for="2">Lush</label>
    <input type="radio" name="filmname" value="2" id="but">
  </div>
</fieldset>

【问题讨论】：

设置float: left; 并为#pair 删除display: inline-block;。
谢谢@subarachnid，效果很好！你能解释一下这是做什么的吗？再次感谢！
@m4ge 嘿，快来看看我是否解决了你的问题，还是需要提高我的技能？

标签： html css

【解决方案1】：

inline-block 元素之间有空格。有三种可能的解决方案：Display: Inline block - What is that space?

如果您将#pair 的background-color 设置为red 之类的值，问题会变得更加明显。

#but {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

#pair {
  display: inline-block;
  width: 20%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background-color: red;
}

<fieldset class="pollbox" style="white-space: nowrap;">
  <legend align="center">Film Name</legend>
  <div id="pair">
    <label for="-2">Trash</label>
    <input type="radio" name="filmname" value="-2" id="but">
  </div>
  <div id="pair">
    <label for="-1">Dislike</label>
    <input type="radio" name="filmname" value="-1" id="but">
  </div>
  <div id="pair">
    <label for="0">Neutral</label>
    <input type="radio" name="filmname" value="0" id="but">
  </div>
  <div id="pair">
    <label for="1">Like</label>
    <input type="radio" name="filmname" value="1" id="but">
  </div>
  <div id="pair">
    <label for="2">Lush</label>
    <input type="radio" name="filmname" value="2" id="but">
  </div>
</fieldset>

上述帖子中提供的 3 种解决方案中的任何一种都应该有效，但这里是一个更改字体大小的示例：

.pollbox {
  font-size: 0;
}

legend,
#pair {
  font-size: 16px;
}

#but {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

#pair {
  display: inline-block;
  width: 20%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

<fieldset class="pollbox" style="white-space: nowrap;">
  <legend align="center">Film Name</legend>
  <div id="pair">
    <label for="-2">Trash</label>
    <input type="radio" name="filmname" value="-2" id="but">
  </div>
  <div id="pair">
    <label for="-1">Dislike</label>
    <input type="radio" name="filmname" value="-1" id="but">
  </div>
  <div id="pair">
    <label for="0">Neutral</label>
    <input type="radio" name="filmname" value="0" id="but">
  </div>
  <div id="pair">
    <label for="1">Like</label>
    <input type="radio" name="filmname" value="1" id="but">
  </div>
  <div id="pair">
    <label for="2">Lush</label>
    <input type="radio" name="filmname" value="2" id="but">
  </div>
</fieldset>

【讨论】：

【解决方案2】：

尝试编写附加代码。它肯定会起作用，如果它没有让我在 cmets 中知道。我会尽力帮助你的。

我有一个建议给你，下次你制作网页/网站时使用 Viewport Units 像 vw 和 vh 而不是 >px 和 % 因为它将帮助您使您的网页/网站具有响应性。而不是id 使用class，因为id 对于一个元素是唯一的，class 可以用于多个元素。

.but {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

.pair {
  display: inline-block;
  width: 19vw;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <title>Film Name</title>
</head>
<body>
<fieldset class="pollbox" style="white-space: nowrap;">
  <legend align="center">Film Name</legend>
  <div class="pair">
    <label for="-2">Trash</label>
    <input type="radio" name="filmname" value="-2" class="but">
  </div>
  <div class="pair">
    <label for="-1">Dislike</label>
    <input type="radio" name="filmname" value="-1" class="but">
  </div>
  <div class="pair">
    <label for="0">Neutral</label>
    <input type="radio" name="filmname" value="0" class="but">
  </div>
  <div class="pair">
    <label for="1">Like</label>
    <input type="radio" name="filmname" value="1" class="but">
  </div>
  <div class="pair">
    <label for="2">Lush</label>
    <input type="radio" name="filmname" value="2" class="but">
  </div>
</fieldset>
</body>
</html>

【讨论】：