How to vertically align? | WPDFD.com Forums

Rookiewebgal said:

06/08/04, 160 10 2004 2004:%i:1086750617 23:10:17

Hi,

Total newbie.

I have a single page that contains a graphic I've sliced and created an image map in ImageReady CS. The page works fine.

I need to center the graphic both horiz. and vert. so no matter how the browser window is sized, the graphic appears centered.

I add the 'Div Align=Center' tag so it would center horizontally and the page works fine.

Now I need to center the graphic vertically (again, it's sliced so IR created a table).

Is there an easy way to do this without using CSS, bringing it into DreamWeaver, etc.?

Thank you in advance for any help!

Joe Gillespie said:

06/09/04, 161 34 2004 2004:%i:1086770083 04:34:43

You can do it with a single cell table set to 100% width, 100% height and align="center" valign="middle" however, it won't be valid HTML as table height is no longer allowed so there is no guarantee that it will work in the future.

It is better to use CSS and it's not difficult...

http://www.wpdfd.com/editorial/wpd0103.htm#toptip

Rookiewebgal said:

06/09/04, 161 54 2004 2004:%i:1086800076 12:54:36

Thank you. I followed the article you mentioned, tweaked the CSS settings and kind of got it to work.

Kk5st said:

10/12/04, 286 43 2004 2004:%i:1097566983 03:43:03

Forum said:
You can do it with a single cell table set to 100% width, 100% height and align="center" valign="middle" however, it won't be valid HTML as table height is no longer allowed so there is no guarantee that it will work in the future.

It is better to use CSS and it's not difficult...

http://www.wpdfd.com/editorial/wpd0103.htm#toptip

Height is not an attribute of table, but height is a property (css) of table. This is useful in centering an element vertically. The method you describe becomes problematic should the viewport be smaller than the centered element. In that case, a portion of the element is pulled beyond the viewport by the negative margin only to become unviewable.

A solution is available that avoids losing pieces of the element. It uses the height property of table and the default valign="middle" of td. The horizontal is handled conventionally with css. An example may be seen at my demo, Centering the Vertical.

cheers,

gary

Joe Gillespie said:

10/12/04, 286 15 2004 2004:%i:1097579746 07:15:46

Except that tables are for 'tabular data' and should not be used this way - semantically. But I won't tell anyone if you do

Kk5st said:

10/12/04, 286 47 2004 2004:%i:1097596029 11:47:09

True, true. A single celled table as a wrapper seems a sane compromise. It does not cause accessibility problems nor does it hinder maintenance, and the content to tare ratio is only minimally compromised. All in all, reasonable.

The only thing is, in the practical case where would you use it other than in one of those abominable splash screens?

cheers,

gary

Schomer said:

11/03/04, 308 03 2004 2004:%i:1099530197 20:03:17

To answer your question about where it might be used, other than in a splash screen (which I can't stand either, by the way)...

I think I have case where I'm trying to display small thumbnail images in rows and columns. I have created a box, then floated it left, so the boxes all flow nicely on the page into rows/columns. My problem now is that I'd like the images inside the boxes to be in the middle - vertically.

Each image could be a little different in size. For instance, if you take a picture with your digital camera as portrait, then landscape, now you have two pictures that do not have the same height and width. What I do know is they will fit within 128x128 px because I'm making the thumbnail images programatically that way.

Here's my CSS for the boxes:

div.thumbnail_box {
float: left;
margin: 6px;
padding: 6px;
border: solid 1px;
width: 140px;
height: 140px;
}

div.center-image-in-box {
text-align: center;
}

And here is what I have for HTML:

I can't seem to get the image to be positioned in the middle of the box, vertically.

Make sense?

Basically, I need a box to float left, then have an image inside it positioned in the middle - vertically.

Hmm...

-Schomer