Question

I’m writing a contact page, but I have a strange problem. Right from the inputs and textarea I have a cross. When I point at the cross there will be text, but that works fine.
I have centred the cross vertically so it will appear in the middle next to the input / textarea. I have set the input / textarea and the cross in a div, and with the input div’s it works fine, but with the textarea div, which is higher than the input div’s, I have the problem that the cross is at the bottom instead of in the middle. Please take a look to see what’s the problem: 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>

And this is the style of the cross:

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

If you need more information you can look at the page source.

Answer 1

Lots of things you could actually do here but perhaps one of the most simple ones would be to simply float your cross class to the right and add some top margin

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

EDIT: Do note this will not position the cross in the middle for the text area however considering how vertical alignment can be browser inconsistent putting the cross right at the top might also not be a bad call.