css absolute input div position

Question

I have a textbox container div (div.tb) with position:relative, containing the input and placeholder div, these both have position:absolute.

The problem is that the input text is vertically centered, but the placeholder text isn't vertically centered.

So I need the placeholder text to be vertically centered, just like the input.

HTML:

<div class="tb">
    <div class="placeholder">username</div>
    <input type="text" name="tb-username" />
</div>

CSS:

.tb{
    position: relative;
    height: 28px;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
}

.tb input, .tb .placeholder{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 28px;
}

Tested with latest Chrome for Mac Os X

Thanks for your time.

@Madbreaks vertical align, not horizontal alignment, but the input and placeholder equal centered vertically. — onlineracoon, May 08 '12 at 21:05
Try setting the line-height property of your .placeholder and make it equal to your input height. — rafaelbiten, May 08 '12 at 21:10
So is the input on top of the div or vice-versa? Since they're both positioned absolutely I can't tell which one you want to show on top of the other. — j08691, May 08 '12 at 21:13

score 1 · Accepted Answer · answered May 08 '12 at 21:11

1

Try changing line-height for your placeholder text. I'm not seeing what you're doing but that should fix the problem. (set a line-height equal to your input height. Hope it helps!

answered May 08 '12 at 21:11

rafaelbiten

6,074
2
31
36

Do you have a link? And btw, why don't you try using the placeholder="placeholder text" inside your input tag? – rafaelbiten May 08 '12 at 21:13
because I can't style the placeholder and it won't work crossbrowser. – onlineracoon May 08 '12 at 21:16
ok, your input height is 28px, not 18px... you can add a line-height: 28px to your .placeholder and it will work just fine! Edit: and I would use html5 placeholder anyway, and use that just as a fallback. – rafaelbiten May 08 '12 at 21:18

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

if you only have to support Chrome & FF & IE 8+ then

following css will help:

display: table-cell; vertical-align: middle;

also take a look at following for diff ways to achieve the same

How to vertically center a div for all browsers?

edited May 23 '17 at 11:50

Community

1
1

answered May 08 '12 at 21:18

N30

3,463
4
34
43

css absolute input div position

2 Answers2