当前位置: 动力学知识库 > 问答 > 编程问答 >

css - How to align label alongside input field

问题描述:

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?

网友答案:

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: