Question

我有一个包含2行20列的textarea消息框。我想保留这个盒子的标签 - '消息'正好在textarea外面的中心。我应该用什么css属性来对齐它？我使用了以下方法，但在我的情况下没有帮助。

CSS：

.headerImage {
width: 100%;
text-align: center;
}

.footer {
width: 100%;
text-align: center;
border: 0;
}

.page {
margin-top: 42px;
padding: 10px;
width: 866px;
text-align:left;
margin-left: auto;
margin-right: auto;
border: 1px solid #C0C0C0;
border-top: 0px;
margin-bottom: 10px;
}

.main {
margin: 10px;
border-style: groove;
padding: 20px;
}

.borderhead {
z-index: 10;
position: relative;
top:-32px;
left: 2px;
background: white;
}

.commonText {
font-family: arial;
font-size: 11px;
color: black;
text-align: left;
line-height: 16px;
}

.mandatoryStar {
color: red;
padding-right: 5px;
font-size: 12px;
}

.padTxtbox {
padding-left: 5px;
font-family: arial;
padding-bottom: 5px;
text-align: left;
color: black;
font-size: 11px;
display:inline;
position: relative;
}

.contactPad {
margin-left: 300px;
position: absolute;
display: inline;
font-family: arial;
font-size: 11px;
color: black;
text-align: left;
line-height: 16px;
}

.txtBox {
font-family: arial;
font-size: 11px;
width: 150px;
}

.errormsg {
font-family: arial;
font-size: 11px;
color: red;
}

.suggest {
padding-left: 10px;
font-family: arial;
font-size: 11px;
padding-bottom: 4px;
vertical-align: middle;
display: inline-block;
}

.multitxtboxLarge {
width: 420px;
font-family: arial;
font-size: 11px;
height: 80px;
color: black;
}

.cancel {
vertical-align: top;
padding-left: 100px;
}

.textarea {
vertical-align:middle;
display: inline-block;
}

HTML：

<div class ="pa">
    <br>
    <div class="col-md-6 col-md-offset-2">
        <div class="container">
            <div class="row">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="">Suggestions</a></li>
                    <li><a href="contact.php">Contact</a></li>
                    <li><a href="">Login/Register</a></li>
                    <li><a href="">Account</a></li>
                    <li><a href="">Journals</a></li>
                    <li><a href="">Home</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="page">
    <div class ="main">
        <span class="borderhead">Contact Us</span>
        <form name="form1" method="post" action="contact.php" id="form1">
            <div id="commonText" class="commonText">
                <div style="margin-left: 80px">
                    <table>
                        <tr>
                            <td class="commonText"><b>Mail</b></td>
                            <td class="contactPad"><b>Phone</b>&nbsp;800-237-6999</td>
                        </tr>
                        <tr>
                            <td class="commonText">8789 San Jose Blvd #305,Mail,</td>
                            <td class="contactPad"><b>Fax</b>&nbsp;800-647-1356</td>
                        </tr>
                        <tr>
                            <td class="commonText">Jacksonville, FL 32217</td>
                            <td class="contactPad">Submit form below.</td>
                        </tr>
                    </table>
                </div>
            All fields that have (<span class="mandatoryStar">*</span>) are mandatory fields.
            <br>
            <br>
            <div style="padding-left: 46px;padding-bottom: 7px">
                <span class="mandatoryStar">*</span>Name
                <div class="padTxtbox">
                    <input name="txtName" type="text" id="txtName" class="txtBox" />
                    <span id="reqName" class="errormsg" style="color:Red;display:none;"></span>
                </div>
            </div>
            <div style="padding-bottom: 8px">
                <span class="mandatoryStar">*</span>E-mail Address
                <div class="padTxtbox">
                    <input name="txtEmail" type="text" id="txtEmail" class="txtBox" />
                    <span id="reqEmail" class="errormsg" style="color:Red;display:none;"></span>
                </div>
            </div>
            <div style="padding-left: 52px;padding-bottom: 6px"> Phone
                <div class="padTxtbox">
                    <input name="txtPhone" type="text" maxlength="14" id="txtPhone" class="txtBox" />
                    <span id="regPhone" style="color:Red;display:none;"></span>
                </div>
            </div>
            <div style="padding-bottom: 6px;padding-left: 80px">If you would like someone to contact you by phone, please provide the area code 
                                                            and phone number to be used between 8:00 AM and 5:00 PM EST, Monday through Friday.</div>
            <div class="suggest">
                <span class="mandatoryStar">*</span> Message
                <div class="padTxtbox">
                    <textarea name="txtMessage" rows="2" cols="20" id="txtMessage" class="multitxtboxLarge"></textarea>
                    <span id="reqMessage" class="errormsg" style="color:Red;display:none;"></span>
                </div>
            </div>
                <br>
                <div style="padding-left: 90px;padding-top: 6px">
                    <input type="image" name="imbSubmit" id="imbSubmit" src="images/submit.gif" alt="Submit" onclick="contactSubmit()"/>
                    <img alt="Cancel" src="images/cancel.gif" style="cursor:hand" onclick="ClearFormData()" class ="cancel"/>
                </div>
            </div>
        </form>
    </div>

Answer 1

以下是如何执行此操作的示例：

 <form>
  <label for="textarea">Textarea:</label>
  <textarea cols="50" id="title" name="title" rows="4"></textarea>
</form>

和css属性：

label, textarea{
  display:inline-block;
  vertical-align:middle;
}

Answer 2

你必须把它添加到你的CSS

textarea{
  display:inline-block;
  vertical-align:middle;
}

vertical-align:top;或vertical-align:bottom;

就是这样，我希望我能帮助你:-D

textarea的垂直对齐 - 中间

2 个答案: