Search code examples
csshtmlstylesheetvertical-alignment

CSS: Label vertical-align - not working for last label - why?

Question:
I'm trying to adapt the comment box from this site
http://www.mentby.com/Group/mono-aspnet-list/input-data-cannot-be-coded-as-a-valid-certificate.html

to my site.
I have successfully copied it, but I want to vertical-align the labels in the center.
It's working, but for some odd reason not for the last one.
Can anybody tell me what I am doing wrong / what I am missing ?
Obviously, it has something to do with textarea.

Here is what I have:

<!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>
Solution

  • You need to modify the vertical-align of the input elements:

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

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