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
– onlineracoon, Commented May 8, 2012 at 21:05
Try setting the line-height property of your .placeholder and make it equal to your input height. — rafaelbiten
– rafaelbiten, Commented May 8, 2012 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
– j08691, Commented May 8, 2012 at 21:13

rafaelbiten · Accepted Answer · 2012-05-08 21:11:24Z

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 8, 2012 at 21:11

rafaelbiten

6,2822 gold badges38 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rafaelbiten Over a year ago

Do you have a link? And btw, why don't you try using the placeholder="placeholder text" inside your input tag?

onlineracoon Over a year ago

because I can't style the placeholder and it won't work crossbrowser.

rafaelbiten Over a year ago

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.

Community · Accepted Answer · 2017-05-23 11:50:50Z

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, 2017 at 11:50

CommunityBot

11 silver badge

answered May 8, 2012 at 21:18

N30

3,7034 gold badges38 silver badges43 bronze badges

Collectives™ on Stack Overflow

css absolute input div position

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related