Markup: How to vertically align?

started by Rookiewebgal on Jun 8, 2004 — RSS Feed

Rookiewebgal Rookiewebgal
Posts: 2

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 Joe Gillespie
Posts: 528

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 Rookiewebgal
Posts: 2

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

Kk5st Kk5st
Posts: 15

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 Joe Gillespie
Posts: 528

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 Kk5st
Posts: 15

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 Schomer
Posts: 24

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:

<div class="thumbnail">
<div class="center-image-in-box">
 <img src="images/image1.jpg" alt="image 1" width="100" height="100" /><br />
</div>
</div>

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


Maskodok Eko Maskodok Eko
Posts: 170

Jasa SEO Profesional

TOP SEO | Jasa SEO Profesional RajaPoker88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya IDRPoker.COM Agen Texas Poker dan Domino Online Indonesia Terpercaya POKERSTAR88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya D

You must login to reply