in
won't vertical-align:middle, why?

Question

we have CSS:

#left,#right{width:450px;height:450px;}
#left{position:absolute;left:20px;top:30px;}
#right{position:absolute;left:420px;top:30px;float:center;}

#left img, #right img{float:center; vertical-align:middle;cursor:pointer}

Image is horizotal centered, but gets top aligned (i want middle)

html looks like

<div id="media">
    <div id="left"><img/></div> <div id="right"><img/></div>
</div>

Any idea what i'm doing wrong?

By the way, all this problem it's because i'm displaying images with different resolutions :S

EDIT

This didn't help... :(

#left,#right{width:450px;line-height:450px;}
#left{position:absolute;left:20px;top:30px;}

#right{position:absolute;left:420px;top:30px;float:center;}
#left img,#right img{cursor:pointer;}

well 'html looks like' of corse they have respective alt, title and src attributes ;) — Toni Michel Caubet, Apr 01 '11 at 16:58
This post looks familiar. There is no such thing as 'float:center' first of all. — Rob, Apr 01 '11 at 18:18
I know, but it works anyway (float:left;) but, i'm asking about vertical ;) thx — Toni Michel Caubet, Apr 01 '11 at 20:17

score 4 · Answer 1 · answered Nov 26 '12 at 07:19

you can vertical align an image in a div that has no text in it by setting line-height on the on the div. example:

<div style="height: 100px; line-height: 100px;">
    <img src="http://nelson-haha.com" height="50" style="vertical-align: middle;"/>
</div>

score 3 · Accepted Answer · answered Apr 01 '11 at 16:57

3

You'll first off need to have some height declared on #left or #right to get it to align vertically. (As it is, it has no more known space to align vertically in than the space it's taking up--so it will always appear top-aligned.)

Secondly, make sure you understand vertical-align correctly. Here's a good resource: http://phrogz.net/css/vertical-align/index.html In short, vertical-align is probably not the best solution.

answered Apr 01 '11 at 16:57

So what do i do if no text? seted height but same result :( – Toni Michel Caubet Apr 01 '11 at 17:49
if i understood well method 2 would be like my edit?? if so, didn't help.. :( thanks! – Toni Michel Caubet Apr 01 '11 at 18:01
You have to set a height *and* line-height (to the parent element, so #left or #right or #center) as well. Looks like you set a line-height, but not a height. Give that a shot. – Apr 01 '11 at 21:45

score 0 · Answer 3 · edited May 23 '17 at 11:46

0

vertical-align on an image is how the text aligns to the image, the way the text wraps around the image. Not the way the image is displayed in the div.

Please see this on StackOverFlow

edited May 23 '17 at 11:46

Community

1
1

answered Apr 01 '11 at 17:06

SQLMason

3,275
1
30
40

i see, but my problem is that i'm playing with horzontal and vertical images.... that post only seems to help if you know dimensions already, but thanks! – Toni Michel Caubet Apr 01 '11 at 17:30

in won't vertical-align:middle, why?

EDIT

3 Answers3

in
won't vertical-align:middle, why?