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
How to Align a Label and a Textarea
Is Line-Height: 1.4 The Same as Line-Height: 140%
Span Inside Anchor or Anchor Inside Span or Doesn't Matter
Vertical Align Text After Font Icon
How to Render Svg Elements with Crisp Edges While Still Keeping Anti-Aliasing
Multi-Coloured Circular Div Using Background Colours
Set Div to Remaining Height Using CSS with Unknown Height Divs Above and Below
Responsive Video Iframes (Keeping Aspect Ratio) with Only CSS
CSS Flexbox | Reordering Elements in Mobile
Why Can't I Use a Heading Tag Inside a P Tag and Style It with CSS
How to Display Openweathermap Weather Icon
Flex Child Is Growing Out of Parent
CSS Selector for Text Input Fields
Embedding Image in Email with Vba
How to Add a Title to a HTML Select Tag
HTML: Should I Encode Greater Than or Not? ( > > )
Align Two Divs Horizontally Side by Side Center to The Page Using Bootstrap CSS