Vertically center a checkbox within a div - html

I have a checkbox within a div that is appearing higher than the text I want it to be aligned with.
Here's how it appears in Firefox:
As you can see, the checkbox is just a few pixels higher than the text. I have tried applying various padding / margins, including negative values, but to no avail.
HTML:
<div id="read-confirm-box">
I Have read the above
<input type="checkbox" id="checkbox" />
</div>
CSS:
#read-confirm-box
{
color: #FFF;
width: 180px;
font-size: 12px;
background-color: #333;
border-radius: 3px;
padding: 6px 11px;
margin: auto;
float: left;
}
#checkbox
{
/* Empty */
}

check this jsFiddle
HTML
<div id="read-confirm-box">
I Have read the above
<input type="checkbox" id="checkbox" />
</div>
CSS
#read-confirm-box
{
color: #FFF;
width: 180px;
font-size: 12px;
background-color: #333;
border-radius: 3px;
padding: 6px 11px;
margin: auto;
float: left;
}
#checkbox
{
position: relative;
top: 3px;
}

You can wrap both text and input into a div, It's a good practice.
To align both the divs containing text and control accordingly, use display properties
Try:
HTML
<div id="read-confirm-box">
<div class="inline">I Have read the above </div>
<div class="inline"><input type="checkbox" id="checkbox" /></div>
</div>
<label for="checkbox">I Have read the above </label>
<input type="checkbox" id="checkbox" />
<span>I Have read the above </span>
<span><input type="checkbox" id="checkbox" /></span>
CSS
.inline{
display:inline-block;
vertical-align:middle;
}
Fiddle Example
Updated

Try to use following css.
#checkbox {
vertical-align: middle;
}

The checkbox is likely higher for lack of a reset.css (browsers apply their own defaults).
For usability, you should use the label element, rather than wrapping the input and text in extra divs.
Give the input and label the same margin and voila!
HTML
<div id="read-confirm-box">
<input type="checkbox" id="checkbox" />
<label for="checkbox">I Have read the above </label>
</div>
CSS
#read-confirm-box {
color: #FFF;
width: 180px;
font-size: 12px;
background-color: #333;
border-radius: 3px;
padding: 6px 11px;
margin: auto;
float: left;
}
input {
margin: 3px;
}
label {
float:left;
margin: 3px;
}
http://jsfiddle.net/djungle/x6EUp/1/

Pretty easy fix.
CSS:
#checkbox {
vertical-align:middle;
}

Or as an alternative, forking that fiddle: Fiddle
#checkbox
{
vertical-align:-2px;
}

Related

How to fit content inside div element?

I am trying to fix my content inside my div tag. I have only fit in some of the content inside it, but there is more that needs to be put inside it. I need help.
Note I am doing Angular but I need to fix my HTML & CSS only.
My HTML
<div class="contentBox">
<h1>Please Type In Your Address</h1>
<form (ngSubmit)="onSubmit()" [formGroup]="addressData">
<input class="addressBar" type="text" placeholder="Address" maxlength="30" formControlName="address" autofocus>
</form>
<a routerLink=""><button class="button">Proceed</button></a><br><br>
<a routerLink="mainMenu"><button class="button">Cancel</button></a>
</div>
CSS
.button {
padding: 20px 30px;
font-size: 25px;
background-color: lightblue;
position: relative;
top: 28em;
left: 3em;
}
.button:hover {
padding: 22px 32px;
}
.contentBox {
display: inline-block;
background-color: lightgray;
}
.addressBar {
padding: 20px;
font-size: 30px;
border: 3px black inset;
text-align: center;
position: relative;
top: 3em;
}
Output
You can see the two buttons are not within the div (in grey). How do I expand the div so it will be behind the buttons, providing the background for all the content?
Thanks!
You need to replace your top styles with margin as shown in the fiddle https://jsfiddle.net/saksham_malhotra/cnLrv87f/
By providing top coordinates with position relative, you are shifting your element position without considering the containing element.
It's because you're using position: relative for your address bar and buttons. This shifts that element down by whatever your top value is, relative to where it's normal position is. I would use margin-top to achieve the same effect for your purpose.
.button {
padding: 20px 30px;
font-size: 25px;
background-color: lightblue;
}
.button:hover {
padding: 22px 32px;
}
.contentBox {
display: inline-block;
background-color: lightgray;
}
.addressBar {
padding: 20px;
font-size: 30px;
border: 3px black inset;
text-align: center;
margin-top: 3em;
}
<div class="contentBox">
<h1>Please Type In Your Address</h1>
<form (ngSubmit)="onSubmit()" [formGroup]="addressData">
<input class="addressBar" type="text" placeholder="Address" maxlength="30" formControlName="address" autofocus>
</form>
<a routerLink=""><button class="button">Proceed</button></a><br><br>
<a routerLink="mainMenu"><button class="button">Cancel</button></a>
</div>
You can read more about the position property here
Try this:
<html>
<head>
<style>
textarea {
width:100%;
max-width:250px;
padding: 0 0 80px 0;
}
.contentBox {
display: inline-block;
background-color: lightgray;
}
.addressBar {
/*some style*/}
.button {/*button style here*/}
</style>
</head>
<body>
<div class="contentBox">
<h1>Please Type In Your Address</h1>
<form (ngSubmit)="onSubmit()" [formGroup]="addressData">
<textarea class="addressBar" type="text" placeholder="Address" maxlength="30" formControlName="address" autofocus></textarea>
</form>
<a routerLink=""><button class="button">Proceed</button></a><br><br>
<a routerLink="mainMenu"><button class="button">Cancel</button></a>
</div>
</body>
</html>

How to properly align the span and input elements?

I want to align a <span> element and the <input> text element. The height of <input> and <span> should be the same, the top and bottom border should be on same line and the text inside the <input> and <span> elements should be on the same line.
.cnt {
margin: 5px;
}
.one {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.two {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.in {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
input {
padding: 0;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>
https://jsfiddle.net/ajo4boom/
How to do what I want?
I've found success by using an external stylesheet such as normalize.css. They're very useful for making sure your tags stay aligned across all browsers.
Another solution would be to do the following:
.cnt {
margin: 5px;
}
.one {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.two {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.in {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
input {
position: relative;
top: -1px;
padding: 0;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>
Simply offset the <input> by adding
input {
position: relative;
top: -1px;
}
More info on relative positioning in CSS.
Just add vertical-align to input.
Check: https://jsfiddle.net/ajo4boom/1/
You can use your browser toolkit or the mozilla extention : firebug, to help yourself finding the origin of the problem. You would see that only input was really 17px height. Spans were, in the browser reality, 19px height.
So defining your span height to 19px would also roughtly work.
Many of the native properties of inputs will be different from those of spans. First up, you might also like to normalise border, font-family, font-size, line-height and padding.
To take advantage of the height property, define display: inline-block on both elements. Also, box-sizing: content-box will ensure they have the same box-sizing, meaning the way padding and borders will affect their height and width.
.one, .two, .in {
box-sizing: content-box;
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
display: inline-block;
font-family: sans-serif;
font-size: 16px;
line-height: 18px;
padding: 2px;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>
Here's a possible solution using display: inline-block;, line-height and vertical-align, but it's like #Leeish commented:
Height's are tough with inputs because browsers all like to do their
own thing
.cnt {
margin: 5px;
}
label {
display: inline-block;
}
input {
padding: 0;
}
.one, .two, .in {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
display: inline-block;
line-height: 17px;
vertical-align: top;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>

Left align form labels and space out input elements

I'm struggling to left align the labels on my form and space out the input and button element/s. Can anyone offer any advice on how I can get it done, while keeping the input elements centred?
CSS code:
.bt input {
border: 1px solid #ccc;
color: rgb(60, 60, 60);
display: block;
width: 80%;
padding: 1em;
margin: 0 auto;
}
.bt button {
width: 100%;
padding: 1.5em;
background-color: #1f1f1f;
color: #fff;
border: 0;
}
.bt button:hover {
background-color: #818181;
cursor:pointer;
}
.fbc {
text-align: center;
}
.bt .fb {
background-color: #D5D5D5;
padding: 2em;
color: #585858;
display: inline-block;
width: 50%;
}
HTML code:
<div class="bt fbc">
<div class="fb">
<label>Name (Required)
<input type="text" placeholder="Name" required autofocus>
</label>
<label>Email (Required)
<input type="text" placeholder="example#domain.com" required autofocus>
</label>
<button>SUBMIT BOOKING</button>
</div>
</div>
Jsfiddle: http://jsfiddle.net/r11qv9kh/1/
Define new styles for labels:
.bt label {
margin-bottom: 1em;
display: block;
box-sizing: border-box;
padding: 0 10%;
text-align: left;
}
and change width styles for inputs:
.bt input {
...
width: 100%;
box-sizing: border-box;
}
And in this case you don't have to modify HTML.
Demo: http://jsfiddle.net/r11qv9kh/3/light/
Your labels are inline elements, and therefore will get their text alignment from their parent element. You can give them a block display and assign their text alignment directly to get them going left.
HTML:
<label for="name">Name (Required)</label>
<input id="name" type="text" placeholder="Name" required autofocus>
CSS:
.bt label {
text-align: left;
display: block;
}
Fiddle: http://jsfiddle.net/r11qv9kh/2/
This will align your labels to the left:
Text-align: left;

vertically center text beside input field in IE 7/ IE 8

Problem:
I want to vertically center the text on the left side of the input field. Also I want to center the calendar icon.
HTML:
<div id="dateselect">
<div id="arrivalContainer">
<span class="annotation">Anreise</span>
<input type="text" name="arrival" id="arrival" class="input-styling" maxlength="10" size="10" />
</div>
<div id="departureContainer">
<span class="annotation">Abreise</span>
<input type="text" name="departure" id="departure" class="input-styling" maxlength="10" size="10" />
</div>
<div class="clearer"></div>
</div>
CSS:
#dateselect {
padding-top: 14px;
}
#arrivalContainer {
float: left;
width: 160px;
}
#departureContainer {
float: right;
width: 160px;
}
#arrival {
height: 25px;
width: 68px;
}
#departure {
height: 25px;
width: 68px;
}
.ui-datepicker-trigger {
position: relative;
top: 7px;
left: 3px;
}
.input-styling {
color: #575756;
font-family: "Myriad Roman", Helvetica, Arial, sans-serif;
font-size: 12px;
padding-left: 4px;
}
Live example:
http://bfb.bplaced.net/
The span element should be display: inline-block; I think. I tried it with the line-height and the display: table-cell; approach. I get it work in all browsers except IE7 and IE8.
I know it is an often occuring problem but perhaps you could give me some advice.
Solution:
HTML:
I tried it with valign="middle" but IE8 had still problems. I ended up with this:
<div id="arrivalContainer">
<div class="calendarText"><span class="annotation">Anreise</span></div>
<div class="calendarInput"><input type="text" name="arrival" id="arrival" class="input-styling" maxlength="10" size="10" /></div>
<div class="clearer"></div>
</div>
CSS:
.calendarText {
float:left;
padding-top:14px;
padding-right:5px;
}
.calendarInput {
float: left;
}
For all IE version I have conditional stylesheets.
Try vertical-align:middle; for both your image and your text divs.
This should vertically center the text, by forcing it to display at 25px tall (same as your input field). Line-height then vertically centers the line at 25px tall, too.
.annotation {
display: inline-block;
zoom: 1;
*display: inline;
height: 27px; /* +2px for border */
line-height: 27px;
}
try this:
annotation {
position:realtive;
top: -5px; /*adjust to value that visually centers your text*/
}
for you calendar do the same.

Align checkbox and label

I have a form which code looks like this:
<div id="right_sidebar">
<form id="your_name" name="your_name" action="#" method="post" style="display: block; ">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="msg">Comment <span class="sp"></span></label>
<textarea name="msg" id="msg" rows="7"></textarea>
<input type="checkbox" name="agree">
<label for="agree">Accept the terms</label>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>​
And which is styled with the following CSS:
body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
​As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.
How could I do both?
You can see it live here: form, checkbox failing
One option is to amend the style of the label element that follows the checkbox:
​input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
JS Fiddle demo.
This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.
As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
JS Fiddle demo.
It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-block or leave the display rule away and you're done.
Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.
Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.
<label for="checkbox">
​<input id="checkbox" type="checkbox"> My Label
</label>​​​​​​​​​​​​​​​​​​​​​​​​​​
Forked your fiddle here with one small change. I nested the checkbox inside the label.
<label for="agree"><input type="checkbox" name="agree">Accept the terms</label>
Hope it helps.
All you need to do is add display: inline to the label. Like this:
label[for="agree"] {
display: inline;
}
You may also have to add the following to get the Send button to stay on its own line:
button[type="submit"] {
display: block;
}
That is enough to make it work, but you could also nest the input inside the label, like this:
<label for="agree">
<input type="checkbox" name="agree" />
Accept the terms
</label>
However, most people avoid doing this because it is semantically constricting. I would go with the first method.
Set a class on the checkbox list as follows:
<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>
Then add the following CSS:
.FilterCheck td {
white-space:nowrap !important;
}
This ensures the label stays on the same line as the checkbox.
I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too.
Check my Js Fiddle Demo
.remember {
display: inline-block;
}
.remember input {
position: relative;
top: 2px;
}
<div>
<label class="remember" for="remember_check">
<input type="checkbox" id="remember_check" /> Remember me
</label>
</div>
Tried the flex attribute?
Here's your example with flex added:
HTML
<div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
<label for="from">From</label>
<input type="text" name="from" id="from" value="">
<label for="to">To</label>
<input type="text" name="to" id="to">
<label for="msg">Comment <span class="sp"></span>
</label>
<textarea name="msg" id="msg" rows="7"></textarea>
<div class="row">
<div class="cell" float="left">
<input type="checkbox" name="agree">
</div>
<div class="cell" float="right" text-align="left">
<label for="agree">Accept the terms</label>
</div>
</div>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
CSS
body {
color: #333;
font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
display: flex;
flex-flow: row wrap;
margin: 2 auto;
}
[class="cell"] {
padding: 0 2px;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button {
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
Flex allows for table style control with the use of divs for example.
The simplest way I found to have the checkbox and the label aligned is :
.aligned {
vertical-align: middle;
}
<div>
<label for="check">
<input class="aligned" type="checkbox" id="check" /> align me
</label>
</div>
<div>
<input class="aligned" type="checkbox" />
<label>align me too</label>
</div>
<div>
<input type="checkbox" />
<label>dont align me</label>
</div>
I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.
<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>