Question

我不擅长CSS而且无法快速解决这个问题。

我有以下html，css代码：

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

对应于前两个输入元素的前两个错误消息正在垂直居中。但是，对于textarea元素，错误消息垂直位于底部。

如果我将最后一个元素更改为输入类型元素，则它将垂直居中。但是，我需要最后一个元素是textarea类型。

任何人都可以修复css，并解释为什么它会这样做。

Answer 1

试试这个。

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

至于为什么会发生这种情况：input和textarea是不同的元素，并且它们的行为方式不同。可能是因为input只占用一行文本，并且默认情况下错误消息与文本的底行对齐，对于输入，它看起来就像你想要的那样。但textarea需要多行文本，因此错误消息与元素的底部对齐，而不是元素中文本的底部。

css文本垂直对齐从textarea元素更改为input元素

1 个答案: