I'm trying to center all my radio buttons vertically with its label, but vertical-align doesn't help:
input[type="radio"]{
vertical-align: center;
}
<p style="display:inline-block;margin:0 0;"> Option: </p>
<label>
<input type="radio" name="group1"> Label1
</label>
<label>
<input type="radio" name="group1"> Label2
</label>
<label>
<input type="radio" name="group1"> Label3
</label>
Correct is: vertical-align: middle;
You can use these CSS settings:
input[type="radio"] {
display: block;
margin: 0 auto 5px auto;
}
label {
text-align: center;
display: inline-block;
width: 80px;
}
<p style="display:inline-block;margin:0 0;"> Option: </p>
<label>
<input type="radio" name="group1"> Label1
</label>
<label>
<input type="radio" name="group1"> Label2
</label>
<label>
<input type="radio" name="group1"> Label3
</label>
And applied to your jsfiddle: https://jsfiddle.net/p5ts1rco/1/
[Solved]
I edit this example for checkboxes https://stackoverflow.com/a/494922/7767664 (changed to radio buttons):
.checkboxes label {
display: block;
float: left;
padding-right: 3px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
font-size:29px;
}
<div class="checkboxes">
<label> <span>Option: </span></label>
<label><input type="radio" name="group1" id="x" /> <span>Label text x</span></label>
<label><input type="radio" name="group1" id="y" /> <span>Label text y</span></label>
<label><input type="radio" name="group1" id="z" /> <span>Label text z</span></label>
</div>
Related
So I've just started to learn HTLM and CSS, so to learn I'm just going trough some easy to do examples. But I'm stuck on getting the checkbox to align with the texts I want to align it to.
The example I'm following
And this is how mine looks at the moment:
My copy of the example
As you can see it's not an exact copy of the example and I've tried for some hours now but can't figure it out.
This is my code:
p {
display: table-row;
}
label {
display: table-cell;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
vertical-align: middle;
}
textarea {
vertical-align: middle;
}
.checkbox {
display: flex;
}
<p>
<label for="förnamn"> * Förnamn: </label>
<input id="förnamn" type="text">
</p>
<p>
<label for="efternamn"> * Efternamn: </label>
<input id="efternamn" type="text">
</p>
<p>
<label for="adress"> * Adress: </label>
<input id="adress" type="text">
</p>
<p>
<label for="e-post"> * E-post: </label>
<input id="e-post" type="text">
</p>
<p>
<label for="ålder">Ålder: </label>
<select name="ålder" id="Ålder">
<option value="över_18">Över 18</option>
<option value="under_18">Under 18</option>
</select>
</p>
<p>
<label for="meddelande">Meddelande: </label>
<textarea name="meddelande" id="meddelande" cols="18" rows="2"></textarea>
</p>
<p>
<label for="välj">Välj låtar och media: </label>
</p>
<p class="checkbox">
<label for="ringnes-ronny">Ringnes-Ronny</label>
<label><input type="checkbox">Polisen</label>
<label>59 SEK</label>
<label><input type="checkbox">Valhalla</label>
<label for="39-sek">39 SEK</label>
<label><input type="checkbox">Polisen</label>
<label for="49-sek">49 SEK</label>
<label><input type="checkbox">Monster</label>
<label for="59-sek">39 SEK</label>
</p>
I'm sorry if the code is sloppy, haven't figured out the whole structure yet but I hope its readable.
I've tried to change the display of the .checkbox but none of them does what I would want.
Tried the align and vertical-align but they don't move at all.
Looks like you had a pretty good start on it. I would put the items that I want to be beside each other into a flexbox, and I just moved the labels around so they would be where they are in the example that your following.
display: flex Is super powerful, I HIGHLY reccommend playing flexbox froggy to get a bit more comfortable with it in a fun and engaging way.
Another great tool that is used often to display thing how you want is display: grid and there is an online game for that one as well called grid garden.
p {
display: table-row;
}
label {
display: table-cell;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
vertical-align: middle;
}
textarea {
vertical-align: middle;
}
.checkbox {
display:flex;
}
.flex {
display: flex;
justify-content: space-between;
padding-left: 4em;
}
<!DOCTYPE html>
<html>
<head>
<title> Lab1 </title>
</head>
<body>
<p>
<label for="förnamn"> * Förnamn: </label>
<input id="förnamn" type="text">
</p>
<p>
<label for="efternamn"> * Efternamn: </label>
<input id="efternamn" type="text">
</p>
<p>
<label for="adress"> * Adress: </label>
<input id="adress" type="text">
</p>
<p>
<label for="e-post"> * E-post: </label>
<input id="e-post" type="text">
</p>
<p>
<label for="ålder">Ålder: </label>
<select name="ålder" id="Ålder">
<option value="över_18">Över 18</option>
<option value="under_18">Under 18</option>
</select>
</p>
<p>
<label for="meddelande">Meddelande: </label>
<textarea name="meddelande" id="meddelande" cols="18" rows="2"></textarea>
</p>
<p>
<label for="välj">Välj låtar och media: </label>
</p>
<p class="checkbox">
<div class="flex">
<label><input type="checkbox">Polisen</label>
<label >59 SEK</label>
</div>
<div class="flex">
<label><input type="checkbox">Valhalla</label>
<label for="39-sek">39 SEK</label>
</div>
<label for="ringnes-ronny">Ringnes-Ronny</label>
<div class="flex">
<label><input type="checkbox">Polisen</label>
<label for="49-sek">49 SEK</label>
</div>
<div class="flex">
<label><input type="checkbox">Monster</label>
<label for="59-sek">39 SEK</label>
</div>
</p>
</body>
</html>
maybe that...
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
}
#my-form > label {
display : block;
width : 24rem;
min-height : 2.5rem;
font-size : .9rem;
line-height : 2rem;
}
#my-form > label input[type=text],
#my-form > label select,
#my-form > label textarea {
font-size : 1rem;
float : right;
box-sizing : border-box;
width : 18rem;
}
#my-form > h3 {
margin : 2.5rem 0 0 0;
}
#my-form > fieldset {
display : grid;
grid-template-columns : 8rem 16rem;
border : none;
margin : 0;
padding : 0;
font-size : 1rem;
}
#my-form > fieldset legend {
transform: translateY(2rem);
}
#my-form > fieldset label {
grid-column : 2;
}
#my-form > fieldset label span {
float : right;
}
<form id="my-form">
<label>
* Förnamn:
<input name="förnamn" type="text">
</label>
<label>
* Efternamn:
<input name="efternamn" type="text">
</label>
<label>
* Adress:
<input name="adress" type="text">
</label>
<label>
* E-post:
<input name="e-post" type="text">
</label>
<label>
Ålder:
<select name="ålder">
<option value="över_18">Över 18</option>
<option value="under_18">Under 18</option>
</select>
</label>
<label>
Meddelande:
<textarea name="meddelande" id="meddelande" rows="2"></textarea>
</label>
<h3> Välj låtar och media: </h3>
<fieldset>
<legend> Ringnes-Ronny </legend>
<label>
<input type="checkbox" name="Polisen" value="59">
Polisen
<span>59 SEK</span>
</label>
<label>
<input type="checkbox" name="Valhalla" value="39">
Valhalla
<span>39 SEK</span>
</label>
<label>
<input type="checkbox" name="Polisen" value="49">
Raggare pä stureplan
<span>49 SEK</span>
</label>
<label>
<input type="checkbox" name="Monster" value="39">
Monster
<span>39 SEK</span>
</label>
</fieldset>
</form>
Based on the image supplied try the following. I've replaced p with a fieldset as this is what a collection of check boxes is.
.checkbox {
/*Remove the border from the fieldset*/
border: 0;
/*Flex disply*/
display:flex;
/*Start aligning to the left*/
justify-content: flex-start;
/*Vertical align center*/
align-items: center;
}
.title {padding-right:1em;}
.boxContainer {
/*Give the container some width*/
min-width:40vw;
}
.checkbox label {
/*Set labels to display be block elements*/
display: block;
/*Position relative so child elements are postions relative to this object*/
position: relative;
/*A little spacing*/
margin-bottom: 0.25em;
/*Give us some min width*/
min-width:40vw;
}
.checkbox label input {
/*A litle more spacing*/
margin-right: 0.5em;
}
.checkbox .time {
/*Set our time elements to be absolutely positioned*/
position: absolute;
/*THen move them to the right.*/
right: 0
}
<fieldset class="checkbox">
<div class="title">Ringnes-Ronny</div>
<div class="boxContainer">
<label><input type="checkbox">Polisen<span class="time">59 SEK</span></label>
<label><input type="checkbox">Valhalla<span class="time">39 SEK</span></label>
<label><input type="checkbox">Polisen<span class="time">49 SEK</span></label>
<label><input type="checkbox">Monster<span class="time">39 SEK</span></label>
</div>
</fieldset>
I want to make all my radio in #frequent and the checkbox in #player in a straight line like I did in the #gender, but without the need to give every label and input a separate div. How can I do it?
My codepen and a part of my code:
In #gender:
<div id="gender">
<div class="gm">
<label for="male"> Male </label>
<input type="radio" id="male" name="gender" class="rad" >
</div>
<div class="gf">
<label for="female"> Female </label>
<input type="radio" id="female" name="gender" class="rad" >
</div>
And for example,
<div id="frequent">
<legend> How Frequent Do You Listen To Music </legend>
<label for="aday">All day
<input type="radio" id="aday" name="frequent" class="rad">
</label>
<label for="eday">Every day
<input type="radio" id="eday" name="frequent" class="rad">
</label>
<label for="oday">Every other day
<input type="radio" id="oday" name="frequent" class="rad">
</label>
<label for="party">I'm a party person
<input type="radio" id="party" name="frequent" class="rad">
</label>
</div>
You have to give the following styles then it will be exactly like the gender
#frequent label {
width: 50%;
display: flex;
justify-content: space-between;
}
#player label {
display: flex;
justify-content: space-between;
width: 50%;
}
#player input[type="checkbox"] {
margin-right: 0;
}
#player input {
flex: none;
}
you can also check the codepen
Wrap the text in label in a span and then use the following css
HTML
<label for="saxophone"> <span>Saxophone </span>
<input type="checkbox" id="saxophone" class="chk">
</label>
CSS
label > span {
min-width: 150px;
display: inline-block;
}
I am getting crazy right now since i try to style my radio buttons for hours now and i cant reach my goal (im completely new to the world of css).
What i want to do is simple:
I want three big radiobuttons underneath each other centered in my div with labels vertically aligned to the buttons. something similar to this:
I have the following html:
<div class="answers">
<label>
<input type="radio" name="answers" value="male" /> All
</label>
<label>
<input type="radio" name="answers" value="female" /> Name
</label>
<label>
<input type="radio" name="answers" value="male" /> Vendor No.
</label>
</div>
And the result is this:
I want much bigger buttons and much bigger text. i want the text to be to the right of the buttom with a little padding. i want all radio buttons to be centered. I tried many things but everything was just looking weird. Pls help me... i am beginning to hate css....
You can use this CSS:
.answers label {
display: block;
font-size: 20px;
line-height: 30px;
margin: 0 auto;
width: 150px;
}
.answers {
width: 100%;
}
.answers input[type="radio"] {
height: 30px;
line-height: 30px;
vertical-align: bottom;
width: 30px;
}
JSFiddle: http://jsfiddle.net/ghorg12110/uqyfbjsb/
The only reason to happen this is to have display: block somewhere in your css to radios:
input[type=radio] {
display: block;
}
<div class="answers">
<label>
<input type="radio" name="answers" value="male" />All
</label>
<label>
<input type="radio" name="answers" value="female" />Name
</label>
<label>
<input type="radio" name="answers" value="male" />Vendor No.
</label>
</div>
You can add display: block to second label using nth-child:
label:nth-child(2) {
display: block;
}
<div class="answers">
<label>
<input type="radio" name="answers" value="male" />All
</label>
<label>
<input type="radio" name="answers" value="female" />Name
</label>
<label>
<input type="radio" name="answers" value="male" />Vendor No.
</label>
</div>
References
nth-child
http://jsfiddle.net/6b888vp8/2/
Add display: block to the label in the answers div, and float left to the inputs. HTML has changed too
.answers label {
display: block
}
.answers input[type="radio"] {
float: left;
}
<div class="answers">
<input type="radio" name="answers" value="male" /><label>All</label>
<input type="radio" name="answers" value="female" /><label>Name</label>
<input type="radio" name="answers" value="male" /><label>Vendor No.</label>
</div>
This one worked for me:
input[type="radio"]{
width: 50px !important;
}
Try it out and check if it works for you as well.
Essentially I'm trying to float, most of the list item elements horizontally with with the input underneath the label. Here is a template of what I'm trying to achieve.
I've included some of the code here:
<div>
<label for="headline">Headline: </label>
<input type="text" name="headline" value="Milestone" maxlength="50"size="55">
<br>
<div class="dates clearfix">
<label for="effect_date">Date of Effect:</label>
<input type="text" name="effect_date">
<label for="end_date">End Date (opt):</label>
<input type="text" name="end_date">
<label>Date Visible:</label>
<input type="radio" name="is_date_visible" value="2012">
<label for="is_date_visible_yes">Yes</label>
<input type="radio" name="is_date_visible">
<label for="is_date_visible_no">No</label>
<br>
<label>Administrative:</label>
<input type="radio" name="is_adminis" value="1">
<label for="is_admin_yes">Yes</label>
<input type="radio" name="is_adminis">
<label for="is_admin_no">No</label>
</div>
</div>
And the CSS:
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
div.dates {
}
.dates label {
display: block;
color: #2c93d5;
font-size: 15px;
margin-bottom: 5px;
}
.dates input {
display: block;
}
.dates label, .dates input {
float: left;
}
I've tried various things with the CSS all to no avail. Essentially I can't get the inputs to drop below the labels and I can't line them all up they usually come out staggered from the top.
I also have a fiddle link I've been working on:
http://jsfiddle.net/vjDEq/
Thanks for any help.
Here's something similar, without using floats:
http://jsfiddle.net/vjDEq/19/
HTML
<div>
<label for="headline">Headline: </label>
<input type="text" id="headline" name="headline" value="Milestone" maxlength="50"size="55">
</div>
<div class="dates">
<label for="effect_date">Date of Effect:
<input type="text" name="effect_date">
</label>
<label for="end_date">End Date (opt):
<input type="text" name="end_date">
</label>
<fieldset>
<legend>Date Visible:</legend>
<label for="is_date_visible_yes">
<input type="radio" name="is_date_visible" id="is_date_visible_yes" value="yes">
Yes
</label>
<label for="is_date_visible_no">
<input type="radio" name="is_date_visible" id="is_date_visible_no" value="no">
No
</label>
</fieldset>
<fieldset>
<legend>Administrative:</legend>
<label for="is_admin_yes">
<input type="radio" name="is_adminis" id="is_admin_yes" value="1">
Yes
</label>
<label for="is_admin_no">
<input type="radio" name="is_adminis" id="is_admin_no" value="0">
No
</label>
</fieldset>
</div>
CSS
#headline {
margin-bottom: 1em;
}
label {display: block;}
.dates label {
color: #2c93d5;
font-size: 15px;
margin-bottom: 5px;
}
.dates input {
display: block;
}
.dates fieldset input {
display: inline;
}
.dates label, .dates fieldset {
display: inline-block;
margin-right: 2em;
}
.dates fieldset label {
margin-right: 1em;
}
Instead of floats, the labels wrap the inputs and are set to inline-block. The radio buttons should be in a fieldset. Note that jsfiddle is adding normalize.css, which removes borders/margins/padding from the fieldset and legend. You have the option of floating the Administrative fieldset to the right if your layout demands it.
Let's say I have some radio buttons with their labels looking like this:
<label for="my_radio_button_id">My Label</label>
<input type="radio" name="radio" id="my_radio_button_id" />
How do I center each radio button below its corresponding label and align it horizontally?
FIDDLE
.checkboxgroup {
display: inline-block;
text-align: center;
}
.checkboxgroup label {
display: block;
}
<div id="checkboxes">
<div class="checkboxgroup">
<label for="my_radio_button_id1">My Label1</label>
<input type="radio" name="radio" id="my_radio_button_id1" />
</div>
<div class="checkboxgroup">
<label for="my_radio_button_id2">My Label2</label>
<input type="radio" name="radio" id="my_radio_button_id2" />
</div>
<div class="checkboxgroup">
<label for="my_radio_button_id3">My Label3</label>
<input type="radio" name="radio" id="my_radio_button_id3" />
</div>
</div>
Would this work? http://jsfiddle.net/fFEwh/2/
JSFIDDLE
This alternative does not use div as wrappers, I use this to get a short DOM tree.
/* center radio below label */
.radioGroupBelow label {
display: inline-block;
text-align: center;
margin: 0 0.2em;
}
.radioGroupBelow label input[type="radio"] {
display: block;
margin: 0.5em auto;
}
<div class="radioGroupBelow">
Fruits:
<label for="fruit1">Orange
<input type="radio" name="fruits" id="fruit1">
</label>
<label for="fruit2">Apple
<input type="radio" name="fruits" id="fruit2">
</label>
<label for="fruit3">Grape
<input type="radio" name="fruits" id="fruit3">
</label>
<label for="fruit4">Lemon
<input type="radio" name="fruits" id="fruit4">
</label>
</div>