html - CSS div 对齐

Question

我在对齐 div 时遇到问题。请看下面的html。我基本上有一个带有标签和输入字段的表单恶魔，以及一个 <p>在输入字段的右侧。对于某些字段，<p>元素有小文本，适合在同一行。但对于某些字段，它有更多的文本，达到 2 或 3 行。如何设置 <p> 的 CSS元素，如果它只有一行，那么它应该显示在输入字段的中间，但如果文本超过一行，那么它就会上升。希望我的问题很清楚。感谢您的帮助。

HTML:

<div class="container">
<label>Label</label><input class="input" />
    <p>Lorem ipsum dolor.  </p>
</div>

CSS:

.container{
border:1px solid black;
    padding:20px;
    float:left;
}
label{
    line-height:2.5;
    float:left;
    border:1px solid green;
    width:60px;
    margin-right:10px;
}

input{
    border:1px solid green;
    height:34px;
    padding:4px 6px;
    width:200px;
    float:left;
    margin-right:10px;
}

p{
border:1px solid red;
    float:left;
    width:150px;
    line-height:15px;

}

jsFiddle: http://jsfiddle.net/JFjx4/

Answer 1

请解释一下“它应该显示在输入字段的中间”是什么意思？可能你需要的是jsfiddle .我将“LABEL INPUT P”中的“float: left”替换为“display: inline-block”，并在“P”中添加了“vertical-align: middle”。

@Grigor:“text-wrap”是 css3 特性。它可能不适合@Roman。