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.

Answer 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!