中间对齐标签＆amp;使用div的文本框

Question

有.. 我有asp.net webform应用程序，它具有并排排列的服务器标签和文本框。

如果你要看下面的话。

我希望标签文字说例如投诉日期与文本框的中间完全对齐。 像这样。

更多细节： 我有一个div左手拿着标签和右边div保存文本框。 像这样

<div class="left" style="height:50px;" runat="server" >
        <asp:Label ID="Label5" runat="server" Font-Bold="true" ForeColor="#0066ff" Text="Complaint Date"></asp:Label>
    </div>
<div class="right">
        &nbsp;<asp:TextBox ID="TextBox1" runat="server" TextMode="Date" Width="150px"></asp:TextBox>
   </div> 

和我的css将它们对齐就是这样......

.left {
height:25px;
width: 152px;
float: left;
text-align: right;
vertical-align:middle;
}

.right {

width: 43%;
margin-left: 10px;
float:right;
vertical-align:middle;
}

我需要做什么其他格式才能使标签和文本框成为中间的？ 在此先感谢你们

Answer 1

您可以使用::before和::after伪元素来实现此目的。应用display:block并将其设为height至

((total height of the container div - height of contents)/2)

选中此FIDDLE

Answer 2

您必须为标签和文本框指定固定宽度，并margin:0 auto;水平对齐它们。 试试这个：

.left label {
    width:50px;
    margin:0 auto;
}

.right input[type="text"] {
    width:50px;
    margin:0 auto;
}

Answer 3

试试这个：

.left label {
    width:50px;
    margin:0 auto;
    display: block;
    line-height: 30px;
}

.right input[type="text"] {
    width:50px;
    margin:0 auto;
    height: 30px;
}