Vertical Alignment

Hello,

I am trying to vertically aligned, inside a div, two images that are
side by side:
http://www.27lamps.com/Beta/Vertical/Test.html

The image on the right is to much upward and the image on the left has
a bottom spacing between the image tag and the anchor tag where it is
inserted.

How can I solve this problems?

I really would like to have the images centered vertically.

Thank You,
Miguel

shapper wrote:

I am trying to vertically aligned, inside a div, two images that are
side by side:
http://www.27lamps.com/Beta/Vertical/Test.html

The image on the right is to much upward and the image on the left has
a bottom spacing between the image tag and the anchor tag where it is
inserted.

How can I solve this problems?

I really would like to have the images centered vertically.

You've set top and bottom margins on both of the elements you're unhappy
with, so try tweaking the values in your CSS:

div.SiteHead div.Bottom div.Identity div.Welcome {
display: block; /* Divs and floats are automatically block */
float: left;
height: 115px;
margin: 20px 0;
width: 525px;
z-index: 0; /* You don't really need this, do you? */
}

div.Identity h1 {
float: left;
margin: 42px 0;
width: 420px;
}

--
John
Pondering the value of the UIP: http://improve-usenet.org/

On Feb 4, 7:46*am, John Hosking <J... (AT) DELETE (DOT) Hosking.name.INVALID>
wrote:

shapper wrote:

I am trying to vertically aligned, inside a div, two images that are
side by side:
http://www.27lamps.com/Beta/Vertical/Test.html

The image on the right is to much upward and the image on the left has
a bottom spacing between the image tag and the anchor tag where it is
inserted.

How can I solve this problems?

I really would like to have the images centered vertically.

You've set top and bottom margins on both of the elements you're unhappy
with, so try tweaking the values in your CSS:

div.SiteHead div.Bottom div.Identity div.Welcome {
* * display: block; * */* Divs and floats are automatically block*/
* * float: left;
* * height: 115px;
* * margin: 20px 0;
* * width: 525px;
* * z-index: 0; * * * */* You don't really need this, do you?*/

}

div.Identity h1 {
* * float: left;
* * margin: 42px 0;
* * width: 420px;

}

--
John
Pondering the value of the UIP:http://improve-usenet.org/

Thank you. I was able to solve it ...
About the z-index to 0 I have that because inside that div I will have
a Flash movie and on top of my web site I have a CSS Drop Down Menu so
it is for the Flash movie to be behind the Drop Down Menu.

Shouldn't I make this?

Thanks,
Miguel

I really would like to have the images centered vertically.

Your example page goes nuts when text and/or images are changed indicating
inherent problems.

Have you tried a simple one-row, two-column table? Put one image in each
cell and style as needed. (It appears that the row style defaults to:
{vertical-align: middle}.)

It possible that this can be done without the table with some container
using {vertical-align: middle}.

Y.

Y.

Valid return address is <YLeeCoyote (at) mail.com>
(Posting address is for the spammers)

See my stories at http://www.asstr.org/~YLeeCoyote/
See Goldilocks stories at http://www.geocities.com/goldilocks1938/

P & E