CODEWITHSUNDEEP
htmlcssvertical-alignment
Wietse de Vries
Wietse de Vries

Reputation: 685

Vertical center doesn't work

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.

Upvotes: 0

Views: 120

Answers (3)

Cmorales
Cmorales

Reputation: 1007

I'd remove the img from the html and put it via CSS (it's presentational, actually). Put a class to the third div and then this style:

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

I think that's the easiest way.

Upvotes: 1

user188654
user188654

Reputation:

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.

Upvotes: 1

NDBoost
NDBoost

Reputation: 10634

You are most likely using vertical-align incorrectly as its often a very mis-used css style

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

Upvotes: 1

Related Questions