Vertical Alignment Gone Wrong, One More Time

A

Arondelle

{{I know you've heard this 100m times. Publish a FAQ....}}

I've been playing around with 4-column tables, and have had some success
in getting the table cells to line up correctly.

Now, I'm working on getting the contents, thumbnails, to line up the way
I want them to: centered both vertically and horizontally.

"text-align:center;" works OK for the horzontal alignment.
"vertical-align:middle" does not work for the vertical alignment. I've
seen it work before, but I seem to be missing something here.

Misspelling? Misusing? Not in the right place in the list?

The style sheet is below; the commented lines are there for the purposes
of testing. The HTML can be found at:

http://www.red-death.com/~arondelle/graphics/thumbnail-table.html

No, there are no links on the thumbnails yet: one thing at a time,
please....


<!-- sample style sheet -->

body{
/*margin-left: 12%;*/
cursor: crosshair;
}
h3{
font-weight:bold;
font-style:normal;
text-align:center;
vertical-align:middle;
padding: 0;
margin: 0;
}
div#t-body{
width: 618px;
border: 4px ridge cyan;
}
div img{
border: 0;
vertical-align: middle;
text-align: center;
}
div#tcol-first{
width:25%;
height: 150px;
float:left;
/*text-align: center;
vertical-align: middle;*/
padding: 0;
border: 2px solid red;
}
div#tcol-second{
width:25%;
height: 150px;
float:left;
/*text-align: center;
vertical-align: middle;*/
padding: 0;
border: 2px solid blue;
}
div#tcol-third{
width:25%;
height: 150px;
float:left;
margin-right: -2px;
/*text-align: center;
vertical-align: middle;*/
padding: 0;
border: 2px solid lime;
}
div#tcol-fourth{
width:100%;
height: 150px;
margin-left: -2px;
/*text-align: center;
vertical-align: middle;*/
padding: 0;
border: 2px solid yellow;
}
<!-- -->
 
S

Stephen

In Arondelle <[email protected]> expounded:
| {{I know you've heard this 100m times. Publish a FAQ....}}
|
| I've been playing around with 4-column tables, and have had some
| success in getting the table cells to line up correctly.
|
| Now, I'm working on getting the contents, thumbnails, to line up the
| way I want them to: centered both vertically and horizontally.
|
| "text-align:center;" works OK for the horzontal alignment.
| "vertical-align:middle" does not work for the vertical alignment.
| I've seen it work before, but I seem to be missing something here.
|
| Misspelling? Misusing? Not in the right place in the list?
|
| The style sheet is below; the commented lines are there for the
| purposes of testing. The HTML can be found at:
|
| http://www.red-death.com/~arondelle/graphics/thumbnail-table.html
|
| No, there are no links on the thumbnails yet: one thing at a time,
| please....
|
|
| <!-- sample style sheet -->
|
| body{
| /*margin-left: 12%;*/
| cursor: crosshair;
| }
| h3{
| font-weight:bold;
| font-style:normal;
| text-align:center;
| vertical-align:middle;
| padding: 0;
| margin: 0;
| }
| div#t-body{
| width: 618px;
| border: 4px ridge cyan;
| }
| div img{
| border: 0;
| vertical-align: middle;
| text-align: center;
| }
| div#tcol-first{
| width:25%;
| height: 150px;
| float:left;
| /*text-align: center;
| vertical-align: middle;*/
| padding: 0;
| border: 2px solid red;
| }
| div#tcol-second{
| width:25%;
| height: 150px;
| float:left;
| /*text-align: center;
| vertical-align: middle;*/
| padding: 0;
| border: 2px solid blue;
| }
| div#tcol-third{
| width:25%;
| height: 150px;
| float:left;
| margin-right: -2px;
| /*text-align: center;
| vertical-align: middle;*/
| padding: 0;
| border: 2px solid lime;
| }
| div#tcol-fourth{
| width:100%;
| height: 150px;
| margin-left: -2px;
| /*text-align: center;
| vertical-align: middle;*/
| padding: 0;
| border: 2px solid yellow;
| }
| <!-- -->

I wouldn't swear to it, but I think vertical-align is only applicabale to
table cells. What happens if you use padding:1px (value TBD)in your div ids
or in your img src to center the image?
 
A

Arondelle

Stephen said:
I wouldn't swear to it, but I think vertical-align is only applicabale to
table cells. What happens if you use padding:1px (value TBD)in your div ids
or in your img src to center the image?
Click to expand...

Went back to the W3C CSS reference. Read up on tables, CSS-style. My
head is still spinning.

Vertical-align is applicable to table cells *and* images. In the case
of images, sets up how the image is aligned to the text that surounds
it. For it to work in a table constructed of CSS elements, you have to
use display:table, et al..

What I have in my page is not a real CSS table, just sort of a kludgey
box full of boxes. Any sort of hard-coded padding or margins pops the
row alignment of the boxes, especially if the image is only slightly
smaller than the box it's in.

Real CSS tables may be more elegant for displaying content in neatly
ordered columns and rows, but it's not as easy to implement as just
plunking your content into an HTML table -- which is probably why
they're still being used by Big Name Websites which have to be updated
on an hourly basis.

A CSS table is three-dimensional: columns, rows and layers. What I
started with in my own project was an outside table "layer" with a cell
layer composed of boxes in arranged rows inside it. CSS, to the best of
my current understanding, starts with the table layer, then groups of
columns, the columns themselves, groups of rows, the rows themselves
and, lastly the individual cells. All this is to control the visibility
of the various parts. However, once you get the table all set up, you
then can have a go at making the contents of each cell sit up and do tricks.

So, I'm going to abandon the kludge, and experiment with real CSS tables.

Arondelle
 
A

Arondelle

Spartanicus said:
Note that CSS tables are not supported by IE.
Click to expand...

But IE *does* support the use of display:table-thingies. If you set a
box to behave like a table cell with display:table-cell, wouldn't that
enable vertical-align:middle?

Arondelle
 
S

Spartanicus

brucie said:
one of their biggest mistakes
Click to expand...

It certainly would have made migration to CSS layouts much easier for a
lot of people. But CSS tables are not the ideal tool some believe them
to be. Colspan & rowspan are not supported, both are regularly used in
HTML layouts, and more importantly CSS tables suffer from the same
content linearity problems as HTML tables.

Ideally we would have a method to completely disassociate the position
of content segments in the code and the position on/in the output medium
(proper flexibility isn't possible with CSS absolute positioning).

Imagine being able to create a visual layout grid as is possible with
tables, and then being able to designate blocks of content to appear in
specified blocks of the layout grid.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Having trouble centering contents of td ? 3
How to have two html audio players on one page? 0
How do I fix this issue in sqaurespace code block? 1
Wrong Coding 5
Aligned to the left 3
Please Help? 0
Slideshow not working properly 2

Members online

No members online now.
Total: 74 (members: 0, guests: 74)
Robots: 468

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,819
Latest member
masterdaster

Latest Threads

Top