Is it possible to vertical align in a div?

[Dave Rado]

Hi

See my mock-up at http://tinyurl.com/35tv29. The three icons are
supposed to be vertically aligned on their bottoms (using "vertical-
align: bottom"), but they aren't, they're vertically aligned on their
tops. Is there any way to align them vertically on their bottoms (or
middle for that matter) short of resorting to using a table (where
"vertical-align: bottom" does work)?

Dave

[Ben C]

On 2008-03-17, Dave Rado <da*******@dsl.pipex.comwrote:

Hi

See my mock-up at http://tinyurl.com/35tv29. The three icons are
supposed to be vertically aligned on their bottoms (using "vertical-
align: bottom"), but they aren't, they're vertically aligned on their
tops. Is there any way to align them vertically on their bottoms (or
middle for that matter) short of resorting to using a table (where
"vertical-align: bottom" does work)?

Vertical-align doesn't apply to blocks (like divs).

But you can set it on the imgs inside the divs if you want. Or set img
to display: block which I think is more appropriate here.

[Dave Rado]

Hi Ben

On 17 Mar, 17:09, Ben C <[e-mail]:

Vertical-align doesn't apply to blocks (like divs).

But you can set it on the imgs inside the divs if you want.

I tried your suggestion but must be doing something wrong. See my mock-
up at http://tinyurl.com/2qh2vy. Can you see what I'm doing wrong?

Or set img
to display: block which I think is more appropriate here.

I tried this suggestion as well but again, I must be doing something
wrong. See my mock-up at http://tinyurl.com/2rzobt. Can you see what
I'm doing wrong?

Perhaps I should explain that I am trying hard to understand the more
complex parts of css but am finding it a real culture shock, having
learnt my html in the early 90x, when everyone used tables, and then
moved away from web development for several years, and I am now having
to build a complex website and as I say am finding the change from
using tables for layout to using css a real culture shock and a huge
learning curve. I don't need convincing of the benefits of the change,
but I need lots of hand holding.

Dave

[Ben C]

On 2008-03-18, Dave Rado <da*******@dsl.pipex.comwrote:

Hi Ben

On 17 Mar, 17:09, Ben C <[e-mail]:

>Vertical-align doesn't apply to blocks (like divs).

But you can set it on the imgs inside the divs if you want.

I tried your suggestion but must be doing something wrong. See my mock-
up at http://tinyurl.com/2qh2vy. Can you see what I'm doing wrong?

>Or set img
to display: block which I think is more appropriate here.

I tried this suggestion as well but again, I must be doing something
wrong. See my mock-up at http://tinyurl.com/2rzobt. Can you see what
I'm doing wrong?

You've got three different divs, two of which are absolutely positioned.

Vertical-align on the images is only going to align them if they're on
the same line, which means (at least) all in the same block box.

Perhaps I should explain that I am trying hard to understand the more
complex parts of css but am finding it a real culture shock, having
learnt my html in the early 90x, when everyone used tables, and then
moved away from web development for several years, and I am now having
to build a complex website and as I say am finding the change from
using tables for layout to using css a real culture shock and a huge
learning curve. I don't need convincing of the benefits of the change,
but I need lots of hand holding.

Best to say exactly what you are trying to do with the three images in
the first place from the top.

[Bergamot]

Dave Rado wrote:

>
I need to create a
div 607px wide that is horizontally centred on the page, which I've
managed to do successfully. Within this div I need to place three
icons, one at the left edge of the div, one at the right edge of the
div, and one centred within the div. I've also managed to do this
successfully, and I' posted a mock-up (which is at http://tinyurl.com/35tv29)
showing my code which did this. However, the three icons are top-
aligned within the div and top-aligned relative to each other, whereas
I need them to be bottom-aligned

They really only appear to be top aligned because the line heights are
stretched as needed to fit the inline image. Baseline is the default
alignment for images. If the line heights were equal, the baseline would
be the same for all and they'd be aligned as you want.

Except maybe in IE. It doesn't do well with changing line-height of
replaced elements.

--
Berg

[Dave Rado]

HI Berg

On 18 Mar, 22:59, Bergamot <[e-mail]:

They really only appear to be top aligned because the line heights are
stretched as needed to fit the inline image. Baseline is the default
alignment for images. If the line heights were equal, the baseline would
be the same for all and they'd be aligned as you want.

Except maybe in IE. It doesn't do well with changing line-height of
replaced elements.

It sounds like I should go back to using tables?

Dave

[Dave Rado]

Hi dorayme

On 18 Mar, 22:59, dorayme <[e-mail]:

What made you think your http://tinyurl.com/2pjwwy was a mockup
of my suggestion above?

--
dorayme

Obviously I haven't understood your suggestion.

Dave

[Dave Rado]

Hi dorayme

On 19 Mar, 01:49, dorayme <[e-mail]:

I have made up a page for you that may help you understand the
ideas here:

<http://netweaver.com.au/alt/inlineImages/rado_imagesOnALine.html>

Many thanks, I'll study that page soon. However, Ben's suggestion
worked for me, so although I'm sure yours would work just as well,
I'll go with what is already working.

(I think I did say to you ages ago that unless you are super keen
on a course of study in this business, you should just use tables
for where you are fussy with exact layouts. But I made the above
in case it helps you or anyone else)

I thought you only said it's okay to use tables for numbering,
including for heading numbering, and I've gone with your suggestion on
that. But for layout I thought tables were considered a no-no these
days? In any case with respect to my original query, Ben's suggestion
works great (and I'm sure yours does too, and I will study yours
shortly), and it does simplify the code compared with using a table.
But I have a similar but different problem which I've just posted
about in reply to Ben.

Dave

[Dave Rado]

Hi dorayme

On 27 Mar, 23:02, dorayme <[e-mail]:

You might consider it revelatory to *not* require such complicated and
exact layout. Have you really taken your head out of the considerable
details you are involved with and really thought how you might deliver
your material in a much simple way without compromising what the end
user will truly benefit from?

I believe so. I hope that if you disagree, you will still be willing
to help me find solutions to specific problems that I post about.

Dave