css text vertical alignment changes from textarea element to input element_问答_开发者

css text vertical alignment changes from textarea element to input element

开发者 https://www.devze.com 2023-03-29 11:26 出处：网络

I\'m not good in css and not able to quick fix this issue. I have the following html, css code: <!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\"

相关专题：css

I'm not good in css and not able to quick fix this issue.

I have the following html, css code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>temp</title>
        <meta name="generator" content="Studio 3 http://aptana.com/">
        <meta name="author" content="Subhranath Chunder">
        <!-- Date: 2011-08-19 -->
        <style type="text/css">
            div {
                width:400px;
            }
            p, input {
                display:inline-block;
                height:80px;
            }
            ul.error-list, li {
                display:inline;
            }
        </style>
    </head>
    <body>
        <div>
            <p><input type="text" value="Name" name="name" /></p><ul class="error-list"><li>Error 1</li></ul>
            <p><input type="text" value="Email" name="email" />开发者_运维问答</p><ul class="error-list"><li>Error 1</li></ul>
            <p><textarea name="address" />Address</textarea></p><ul class="error-list"><li>Error 1</li></ul>
        </div>
    </body>
</html>

The first two error messages corresponding to the first two input elements is getting vertically centered. But, for the textarea element, the error message is vertically at the bottom.

If I change the last element to input type element, then it gets vertically centered. But, I need the last element to be of textarea type.

Can anyone fix the css, and give an explanation of why it's behaving as such.

Try this.

    <style type="text/css">
        div {
            width:400px;
        }
        p, input, textarea {
            display:inline-block;
            height:80px;
        }
        ul.error-list, li {
            display:inline;
        }
        textarea {
            vertical-align:middle;
        }
    </style>

As for why this happens: input and textarea are different elements, and they behave in different ways. Possibly because input only takes one line of text, and the error message is by default aligned to the bottom line of text, for inputs it looks as you want it to. But textarea takes many lines of text, so the error message aligns to the bottom of the element, rather than the bottom of the text in the element.