使用 div 居中对齐标签和文本框答案

【问题标题】：Middle align label & textbox using div使用 div 居中对齐标签和文本框
【发布时间】：2014-03-30 15:42:51
【问题描述】：

那里.. 我有一个 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;
}

我还需要做什么其他格式才能使标签和文本框处于中间状态？先谢谢各位了

【问题讨论】：

标签： html asp.net css

【解决方案1】：

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

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

检查这个FIDDLE

【讨论】：

【解决方案2】：

你必须给你的标签和文本框一个固定的宽度和margin:0 auto; 来水平对齐它们。试试这个：

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

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

【讨论】：

【解决方案3】：

试试这个：

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

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

【讨论】：