Question

我正在写一个联系页面，但我有一个奇怪的问题。从输入和textarea我有一个十字架。当我指向十字架时会有文字，但这样可以正常工作。我将十字架垂直居中，因此它将出现在输入/ textarea旁边的中间。我已经在div中设置了输入/ textarea和十字，并且使用输入div它可以正常工作，但是对于高于输入div的textarea div，我有问题，十字架在底部而不是在中间。请看一下问题：http://demo.wietsedev.nl/

<div>
    <input type="text" placeholder="Volledige naam" id="name" />
    <img src="cross.png" class="cross" />
</div>
<div>
    <input type="text" placeholder="Uw E-mail adres" id="email" />
    <img src="cross.png" class="cross" title="Dit E-mail adres bestaat niet" />
</div>
<div height="100px">
    <textarea placeholder="Uw bericht" id="message"></textarea>
    <img src="cross.png" class="cross" />
</div>

这就是十字架的风格：

.cross {
    height: 20px;
    width: 20px;
    vertical-align: middle;
    margin: 2px;
}

如果您需要更多信息，可以查看页面来源。

Answer 1

您最有可能错误地使用垂直对齐，因为它通常是一种使用不当的CSS样式

http://phrogz.net/css/vertical-align/index.html

Answer 2

你可以在这里做很多事情，但也许最简单的事情就是简单地将你的十字架浮到右边并添加一些上边距

.cross {
    height: 20px;
    width: 20px;
    margin: 2px;
    float: right;
    margin-top:0.6em;
}

编辑：请注意，这不会将十字架放置在文本区域的中间位置，但是考虑到垂直对齐可能会导致浏览器不一致，将十字架放在顶部可能也不是一个糟糕的调用

Answer 3

我将从html中删除img并通过CSS（实际上是表现形式）将其放入。把一个类放到第三个div然后这个样式：

.theDivClass {
padding-right: 40px; /*the img width + a little more */
background: url(pathtotheimg) no-repeat center right; /*Center right does the trick here*/
}

我认为这是最简单的方法。

垂直中心不起作用

3 个答案: