Question

I have a scenario that must be so common, but I’ve not come up with an ideal solution as yet.

I have the following structure – this is how it displays not how the html is laid out.

<div>
    <label></label> <input></input>
    <span>this is where the validation goes</span>
</div>

The issue I have is with the label, which is sometimes long enough to wrap on to 2 lines. I want to be able to centre it alongside the input element regardless of whther it is 1 or 2 lines.

Any ideas as to the best approach to this problem?

Answer 1

I can think of 1 solution, but I’m not sure that’s you want. I will explain and give you an example.

First make your containing <div> position:relative and then the <input> position: absolute. Then your top property must be set to 50%.

And if we wan’t to be exactly in the center we have to give the <input> some height, and at last to give him margin-top: -(height/2).

div { position:relative; }
label { width: 200px; display: inline-block;  }
input { width: 200px; height: 20px; position: absolute; top: 50%; margin-top: -10px;}

And after that just structure the span.