居中文字控制输入文字 [英] Centre text control input text

问题描述

我将以下CSS应用于我的网页，但是textbox控件中的文本与标签上的文本不对齐.

Hi, I''ve the following CSS applied to my web page but the text within the textbox control is not aligning to the text on the label.

.formArea{
        float: left;
    width: 939px;
}
.formArea td.label{
        float: left;
        width:146px;
        margin-bottom:10px;
        margin-top:6px;
        text-align: right;
}
.formArea td.nonEdit{
        height:30px;
        padding-right:10px;
}
.formArea td.labelwide{
        float: left;
        width:230px;
        margin-bottom:10px;
        margin-top:6px;
}
.formArea td.labelmid{
        float: left;
        width:180px;
        margin-bottom:10px;
        margin-top:6px;
}.formArea td.labelmid{
        float: left;
        width:190px;
        margin-bottom:10px;
        margin-top:6px;
}
.formArea td.labelshort{
        float: right;
        width:110px;
        margin-bottom:10px;
        margin-top:6px;
}
.formArea td.labelshortLFT{
        float: left;
        width:90px;
        margin-bottom:10px;
        margin-top:6px;
}
.formArea td.Label_Red_Bold
{
        font-weight: bold;
        color: Red;
}
.formArea td.Label_Green_Bold
{
        font-weight: bold;
        color: Green;
}
.formArea td.control{
        width:310px;
    margin-bottom:10px;
        vertical-align:middle;
}
.formArea td.controlmed{
        width:200px;
        margin-bottom:10px;
        vertical-align:middle;
}
.formArea td.buttons{
        padding-left:10px;
        padding-right:10px;
        vertical-align:middle;
}
.formArea td label{
        float: left;
        margin-top:8px;
        color:#000;
}
.formArea td.labelbold label{
        font-weight:bold;
}
.formArea td.labelshort label{
        float: right;
        margin-top:8px;
        margin-right:10px;
        color:#000;
}
.formArea td input[type=text],input[type=password],textarea{
        float: left;
        border:#92d307 solid 1px;
        line-height:20px;
        font-family:Arial, Helvetica, sans-serif;
        padding:5px;
        color:#000000;
        vertical-align:middle;
}
.formArea td input[type=radio]
{
        float: left;
        margin:8px 20px 0px 8px;
}

有人可以帮我将文本框文本与vertical-alin:middle对齐到控件的中心吗?似乎没有用.

谢谢

Can someone please help me to align the textbox text to the center of the control as vertical-alin:middle; doesn''t seem to be working.

Thanks

推荐答案

您的标签控件的高度可能与文本框控件的高度不同，因此，如果您将标签显式设置为与文本框匹配的高度，然后再应用vertical-align:两者的中间，它们应该对齐.
我过去用来检查控件高度的一种方法是在标签的类中添加背景色:黄色，以便在设计时提供更多的视觉反馈.

Your label control is likely not the same height as your textbox control, so if you set your label explicitly to the same height to match your textbox and then apply the vertical-align: middle to both, they should line up.
One way I''ve used in the past to check the heights of my controls and such is to add the background-color: yellow to the class for the labels just to give more visual feedback while designing.

这篇关于居中文字控制输入文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！