开发者

CSS - vertical align text where text can be multiple lines

I've been given a design by a graphic designer, which I'm trying to put into HTML and CSS.

One of the issues I'm facing is on a user input form. In the design the labels for each input are a fixed width - say 100px. The container for each label/input pair is fixed at 2em. The design I've been given has asked that the text for each label is vertically aligned. So the structure is like this:

<containerTag>
    <label />
    <input />
</containerTag>

No problems as long as the text is on one line (I would have just used line-height of 2em to match the container), but some of the text in the labels are wrapping to two or even lines.

Is there a semantic and nice way to get around this problem?

I need something that will work in IE6-9, Firefox 3.5+, Chrome and Safari. Although I am using progressive enhancement, so if t开发者_高级运维here is a solution that will only work on the later browsers, but won't break the older ones, then this would be acceptable.

Any help gratefully received!

Thanks for your time

S


You mean... graceful degradation? :P

Set the white-space CSS property of the labels to "nowrap".

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜