Vertical align image within a DIV in IE?

[Paul Lautman]

I know that this has been asked many times but I cannot find a definitive
answer to it.

I have the following css and html and I would like to have a couple of
images vertically aligned within the div.

Can anyone point me to a decent incarnation for it?

#header {
float: left;
padding: 0px;
margin-right: 2px;
width: 635px;
height: 150px;
vertical-align: middle;
}

<div id="header">
<img src="images/newbadge2.gif" alt=""/>
</div>

TIA
Paul

 

[Neredbojias]

To further the education of mankind, "Paul Lautman"

I know that this has been asked many times but I cannot find a
definitive answer to it.

I have the following css and html and I would like to have a couple of
images vertically aligned within the div.

Can anyone point me to a decent incarnation for it?

#header {
float: left;
padding: 0px;
margin-right: 2px;
width: 635px;
height: 150px;
vertical-align: middle;
}

<div id="header">
<img src="images/newbadge2.gif" alt=""/>
</div>

TIA
Paul

If you want them dynamically v|aligned, you need a table.

http://www.neredbojias.com/zyxix/vcsc/vcsc.html

 

[Yucky Korpulent]

If a static image, go ahead and add it to the header css, e.g.

#header {
float: left;
padding: 0px;
margin-right: 2px;
width: 635px;
height: 150px;
background:url(images/newbadge2.gif) no-repeat center;
}

Yucky,
Yukky Korpulent

 

[Paul Lautman]

If a static image, go ahead and add it to the header css, e.g.

#header {
float: left;
padding: 0px;
margin-right: 2px;
width: 635px;
height: 150px;
background:url(images/newbadge2.gif) no-repeat center;
}

Yucky,
Yukky Korpulent

I need it centered vertically on the left of the block with another image to
the right of it.

 

[Paul Lautman]

To further the education of mankind, "Paul Lautman"


If you want them dynamically v|aligned, you need a table.

http://www.neredbojias.com/zyxix/vcsc/vcsc.html

The whole template is built with DIVs. I had already tried puting a table
into this particular div but then it totally cocked up the vertical height
of the DIV.

 

[Neredbojias]

To further the education of mankind, "Paul Lautman"

The whole template is built with DIVs. I had already tried puting a
table into this particular div but then it totally cocked up the
vertical height of the DIV.

This is a case where a url would have been most helpful. Your reply is
quite illogical.

 

[Yucky Korpulent]

Opt 1. Use a graphics editor to combine them into a single image

Opt 2. Create style definitions for your images, using relative
positioning to get them where you want. For example,

#imgLeft {
position:relative;
top:40px; /* or whatever */
left:10px; /* etc. */
}
#imgRight {
position:relative;
top:40px; /* or whatever */
left:400px; /* etc. */
}

In this case you are specifying the vertical position yourself rather
than vertical aligning, but since your DIV has specified dimensions
anyway, this should get you want you want. There are ways of using CSS
positioning to achieve true middle vertical alignment for the images
but these can lack cross-browser consistency. Google "css vertical
center div" for tons of examples.

Good luck. Yucky,
Yukky Korpulent