CODEWITHSUNDEEP
htmlcsscheckboxvertical-alignment
John 'Mark' Smith
John 'Mark' Smith

Reputation: 2614

Vertically center a checkbox within a div

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:

enter image description here

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 */
}

Upvotes: 2

Views: 17794

Answers (6)

matthewpark319
matthewpark319

Reputation: 1263

Pretty easy fix. CSS:

#checkbox {
    vertical-align:middle;
}

Upvotes: 0

MediaFormat
MediaFormat

Reputation: 377

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/

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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

Upvotes: 3

Ted
Ted

Reputation: 14927

Or as an alternative, forking that fiddle: Fiddle

#checkbox 
{
    vertical-align:-2px;
}

Upvotes: -1

Iqbal Kabir
Iqbal Kabir

Reputation: 1610

Try to use following css.

#checkbox {
    vertical-align: middle;
}

Upvotes: 0

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

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;
}

Upvotes: 7

Related Questions