Question

问题：
我正在尝试调整此网站的评论框
http://www.mentby.com/Group/mono-aspnet-list/input-data-cannot-be-coded-as-a-valid-certificate.html

到我的网站。
我已成功复制它，但我想垂直对齐中心的标签这是有效的，但由于一些奇怪的原因不适用于最后一个。
谁能告诉我我做错了什么/我错过了什么？显然，它与textarea有关。

这就是我所拥有的：

<!DOCTYPE html>
<html>
<head>
    <title>Comment</title>

    <style type="text/css" media="all">

    label 
    {
        cursor: text;
    }


    #commentForm 
    {
        /*width: 80%;*/
        width: 500px;
        margin-top: 10px;
        padding-bottom: 10px;
        background-color: #f6f6f6;
        border-right: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
        border-left: 1px solid #e1e1e1;
    }


    #commentForm div.rowHolder 
    {
        margin-bottom: 5px;
        /*float: left;*/
    }


    .commentFormLabel 
    {
        background: #efefef url(separator.gif) repeat-x top;
        padding: 2px 10px 2px 10px;
        margin: 0 0 20px 0;
        border-bottom: 1px solid #e1e1e1;
        font: bold 13pt "sans-serif", arial, verdana;
        letter-spacing: -1px;
        line-height: 16pt;
        color: #000;
    }


    #commentForm label 
    {
        display: inline-block;
        width: 100px;
        padding-right: 10px;
        text-align: right;

        /*float: left;
        vertical-align: middle;
        */
        font-family: "sans-serif", arial, verdana;
        font-size: 9pt;
        color: #333;
    }


    #commentForm input, #commentForm textarea 
    {
        width: 314px;
        /*float: left;*/
        border: 1px solid #e7e7e7;
        padding: 2px;
    }


    #commentForm .lblVertAlign
    {
        display: table-cell; vertical-align: middle; 
        /*background-color: Red;*/
    }


    </style>
</head>
<body>

    <div id="commentForm">
        <div class="commentFormLabel">Post a Comment</div>
            <div class="formHolder">
                <div class="rowHolder">
                    <div class="lblVertAlign">
                        <!--
                        <span style="vertical-algin: middle;">Name</span>
                        -->
                        <label for="name">Name</label>
                        <input id="name" name="name" value="" />
                    </div>
                </div>

                <div class="rowHolder">
                    <div class="lblVertAlign">
                        <label for="email">Email</label>
                        <input id="email" name="email" value="" />
                    </div>
                </div>
                <div class="rowHolder">
                    <div class="lblVertAlign">
                        <label for="website">Website</label>
                        <input id="website" name="website" value="http://" />
                    </div>
                </div>
                <div class="rowHolder" style="padding: 0px; margin: 0px;">
                    <div class="lblVertAlign">
                        <label for="comment">Comment</label>
                        <textarea id="message" name="message"></textarea>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>

Answer 1

您需要修改输入元素的vertical-align：

http://jsfiddle.net/7VstA/2/

#commentForm input, #commentForm textarea 
{
    width: 314px;
    /*float: left;*/
    border: 1px solid #e7e7e7;
    padding: 2px;
    vertical-align: middle;
}

CSS：标签vertical-align - 不适用于最后一个标签 - 为什么？

1 个答案: