Why are these buttons not properly centred? The middle button is not centred under the title for example

Question

I'm trying to make a poll website for movie night with my friends, but I'm not super hot on html/css. I've used w3schools and some trial and error to get 5 radio buttons set out horizontally, with the text centred above the individual buttons.

The problem is that the middle button isn't centred with the title of the box itself. Another way to see this is that the gap between the left edge and the 1st radio buttons isn't the same size as the gap between the last button and the right edge.

#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>

Set `float: left;` and remove `display: inline-block;` for `#pair`. — Đinh Carabus, Jul 19 '20 at 20:16
Thank you @subarachnid , that worked perfectly! Could you explain what that's doing? Thanks again! — m4ge, Jul 19 '20 at 20:19
@m4ge Hey, hopping in real quick to check whether I solved your issue or do I need to ameliorate my skills? — s1834, Jul 20 '20 at 18:09

score 3 · Accepted Answer · answered Jul 19 '20 at 20:20

There is white space between the inline-block elements. There are three possible solutions: Display: Inline block - What is that space?

The problem becomes more visible if you set the background-color of #pair to something like 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>

Any of the 3 solutions provided in the above post should work, but here is an example of changing font size:

.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>

score 0 · Answer 2 · answered Jul 19 '20 at 20:28

Try writing the attached code. It will surely work and if it doesn't let me know in the comments. I will try my best to help you.

I have a suggestion for you that next time you make a webpage/website use Viewport Units like vw and vh instead of px and % because it will help you make your webpage/website responsive. And instead of id use class because id is unique for one element and class can be used for more than one element.

.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>

Why are these buttons not properly centred? The middle button is not centred under the title for example

2 Answers2