How can I vertical center a input with float: left?

Question

HTML

<div class="containerDiv">
    <p>Test</p>
    <input type="checkbox" checked="checked" />
</div>

CSS

.containerDiv 
{
    width:600px;
}

.containerDiv p 
{
    margin: 10px 0px 10px 10px;
    float: left; 
    width: 500px;
}

.containerDiv input[type='checkbox']
{
    float: right;
    margin: auto 10px;
}

Hello,

I have a div with a text (the text can be very long) in a p-tag and a input. I want vertical center the input right next to the text, but float: left and margin: auto 10px doesn't work.

`margin: auto 10px` creates space left and right. Not top and bottom... since there's no real height whatsoever it won't center either way. Have you tried just `margin-top`? — CaptainCarl, Mar 13 '13 at 10:22
Check following: http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — Sergio, Mar 13 '13 at 10:29
But the div height is different, dependent how long is the text. When i change margin-top i habe to type in a fixed value?1 — bayerthomas, Mar 13 '13 at 10:30

otinanai · Answer 1 · 2013-03-13T11:22:13.527

1

You can place your checkbox in absolute position and use top:50% minus the checkbox height. So you don't need to float:right this element but give it a right position. See this demo: http://jsfiddle.net/4wXuC/1/

edited Mar 13 '13 at 11:22

answered Mar 13 '13 at 11:03

otinanai

3,987
3
25
43

it wont align for single line p text – freshbm Mar 13 '13 at 11:17
1

It aligns perfectly if you change `margin-top` to -5px. It's just a matter of testing for the checkbox height behavior. See the demo: http://jsfiddle.net/4wXuC/1/ – otinanai Mar 13 '13 at 11:22
Tick my suggestion as "answered" then... That's the whole point! – otinanai Mar 13 '13 at 12:27

score 0 · Answer 2 · edited Mar 13 '13 at 10:41

0

For giving margin try margin: 10px auto; instead of margin: auto 10px;

edited Mar 13 '13 at 10:41

Paul Lammertsma

37,593
16
136
187

answered Mar 13 '13 at 10:38

Atif Azad

527
1
4
15

score -1 · Answer 3 · answered Mar 13 '13 at 10:29

-1

Use label instead of p and set the line-height of the label to the total height of the input.

answered Mar 13 '13 at 10:29

simbo

374
4
6

score -1 · Answer 4 · answered Mar 13 '13 at 10:33

-1

 <div style="width: 55px;">
<p style="float: left; margin: 0px 0px 10px 10px; width: auto;">Test</p>
<input checked="checked" style="float: right; margin: 5px auto;" type="checkbox">
 </div>

answered Mar 13 '13 at 10:33

Atif Azad

527
1
4
15

ooooops i thought i am helping you – Atif Azad Mar 13 '13 at 10:36
When the text-length is bigger, there isn't the input vertical center – bayerthomas Mar 13 '13 at 10:40

How can I vertical center a input with float: left?

4 Answers4