Radio/Checkbox Alignment in HTML/CSS

Radio/checkbox alignment in HTML/CSS

I think I have finally solved the problem. One commonly recommended solution is to use vertical-align: middle:

<input type="radio" style="vertical-align: middle"> Label

The problem, however, is that this still produces visible misalignments even though it should theoretically work. The CSS2 specification says that:

vertical-align: middle: Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

So it should be in the perfect centre (the x-height is the height of the character x). However, the problem seems to be caused by the fact browsers commonly add some random uneven margins to radio buttons and checkboxes. One can check, for instance in Firefox using Firebug, that the default checkbox margin in Firefox is 3px 3px 0px 5px. I'm not sure where it comes from, but the other browsers seem to have similar margins as well. So to get a perfect alignment, one needs to get rid of these margins:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

It is still interesting to note that in the table based solution the margins are somehow eaten and everything aligns nicely.

My Checkboxes or Radio Buttons Do Not Align Properly?

It's because your .box class has the text-align set to center. So your labels are honoring that rule, as are the checkboxes. It only 'looks' weird because your label content are variable in length, so the shorter words become closer to the center.

There are a lot of ways to style this and I don't know what you need holistically, but a solution is to just wrap them in a container that will be centered by .box and reset the alignment, keep in mind that any white-space before the word is included too:

#money-container {
  text-align: left;
  width: 100px;
  margin: auto;
}

<div id="money-container">
  <label>
    <input type="radio" name= "trip" value = "check" class= "money">check<br>
  </label>

  <label>
    <input type="radio" name= "trip" value = "cash" class= "money">cash<br>
  </label>

  <label>
   <input type="radio" name= "trip" value = "other" class= "money">other
  </label>
</div>

body {  height: 920px;  width: 1300px;  margin: 0 0 0 0;  font-family: 'Roboto';}
#subtag {  width: 80%;  text-align: center;  margin-left: 75px;}
.container {  background-image: url("https://images.unsplash.com/photo-1491800943052-1059ce1e1012?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80");  background-size: cover;  background-repeat: no-repeat;  position: relative;  height: 920px;  overflow: auto;}
.container::before {  content: " ";  position: absolute;  display: block;  top: 0;  left: 0;  right: 0;  bottom: 0;  width: 100%;  height: 920px;  background: rgba(0, 0, 0, 0.6);}
.box {  margin-left: auto;  margin-right: auto;  margin-top: 25px;  width: 700px;  height: 890px;  border: 3px solid black;  text-align: center;  background-color: #f2f2f2;  opacity: 0.6;}
.textbox {  width: 80%;  background-color: #80bfff;  padding: 8px 8px;  margin-top: 10px;  margin-bottom: 10px;}
#submit {  font-size: 14px;  color: #d6d4e0;  width: 270px;  height: 40px;  background-color: #6b5b95;  opacity: 1.0;}
#submit:hover {  cursor: pointer;}
#money-container {  text-align: left;  width: 100px;  margin: auto;}

<div class="container">  <div class="box">
    <h3> Villa's Traveling Survey </h3>    <p id="subtag">      If there is anything that we can do better please let us know by filling out the survey below </p>
    <form>      <label for="fname"> Name: </label>      <br>      <input type="text" name="fname" placeholder="enter name" class="textbox">      <br>      <label for="email"> Email: </label>      <br>      <input type="text" name="email" placeholder="enter email" class="textbox">      <br>      <label for="age"> Age: </label>      <br>      <input type="text" name="age" placeholder="enter age" class="textbox">      <p> Travel Destination: </p>      <select name="country">        <option disabled selected value="Select Your Travel Destination"> Select Your Travel Destination </option>        <option value="Australia"> Australia</option>        <option value="New Zealeand"> New Zealand </option>        <option value="Thailand"> Thailand </option>      </select>

      <p> How did you pay for your trip? </p>
      <div id="money-container">        <label>        <input type="radio" name= "trip" value = "check" class= "money">check<br></label>
        <label>        <input type="radio" name= "trip" value = "cash" class= "money">cash<br></label>
        <label>        <input type="radio" name= "trip" value = "other" class= "money">other</label>      </div>
      <p> How did you get to your travel destination? </p>      <br>      <input type="checkbox" placeholder="plane" value="plane" class="checkbox">Plane      <input type="checkbox" placeholder="boat" value="boat" class="checkbox">Boat      <input type="checkbox" placeholder="train" value="train" class="checkbox">Train      <input type="checkbox" placeholder="other" value="other" class="checkbox">Other
      <p> What is your favorite color? </p>      <label><input         name="prefer"         value="front-end-projects"         type="checkbox"         class="input-checkbox"       />Front-end Projects</label     >     <br/>     <label      ><input        name="prefer"        value="front-end-projects"        type="checkbox"        class="input-checkbox"      />back-end Projects</label    >    <br/>    <label     ><input       name="prefer"       value="front-end-projects"       type="checkbox"       class="input-checkbox"     />love Projects</label   >

      <p> Please enter any additional comments or suggestions </p>      <textarea rows="5" cols="50" maxlength="100" placeholder="Enter comments here"></textarea>      <br>      <input type="submit" value="submit" id = "submit">      </form>
    </div></div>

how to align radio buttons?

You can wrap inputs in one parent element and then use display: flex and align-items: center on parent, also remove margin from inputs.

.wrap {  display: flex;  align-items: center;}input {  margin: 0;}

<div class="wrap">  <input type="radio" name="konk" id='radio1' value="abc">Dady  <input type="radio" name="konk" id='radio2' value="abc">Oliva</div>

Radio button's label alignment

Please see below, using flexbox

form {
  display: flex;
  justify-content: center; /* Center on page */
}

.list {
  display: flex;
  flex-wrap: wrap; /* Will cause items/button to go to next line */
}

.item {
  width: 100%;
}

<form action="https://www.google.com/search">
  <div class="list">
    <div class="item">
      <input type="radio" name="q" id="common" value="rainbow butterflies">
      <label for="rainbow">Rainbow Butterflies</label>
    </div>
    <div class="item">
      <input type="radio" name="q" id="common" value="rainbow butterflies">
      <label for="brimstone">Brimstone</label>
    </div>
    <button type="submit">Find more about it!</button>
  </div>
</form>

How do I align radio button text inn HTML and CSS?

In your CSS add this:

form {
    display: flex;
}

And delete this because its useless:

input[type="radio"] {
    text-align: justify;
}

Trying to get radio buttons to align properly in html/css

Here try this fiddle
http://jsfiddle.net/Lsh3rqLj/3/

I just wrapped the checkboxes in a div and set both the checkboxes and radiobuttons div's float to left.

#radioButtons{
vertical-align: middle; 
    float: left;
}

#first{

    float:left;
}

The float is what you need here. you can play with it some more to get a perfect positioning.

EDIT: IF you wanted to make it EXACTLY like you are instructed in your assignment add padding-top: 10px; to your checkboxes. I have updated the fiddle to give you the exact effect as you'd see in the img you posted.

---

Related Topics