liketofindoutwhy@gmail.com wrote:
> On Mar 20, 8:12 pm, Gus Richter <gusrich...@netscape.net> wrote:
>> liketofindout...@gmail.com wrote:
>>> so eric.j had a nice solution on
>>> http://www.sitepoint.com/forums/show...81#post3761981
>>> it is simplest... and probably can lead to more understanding of the
>>> inline elements (probably need to read some reference like the CSS
>>> Definitive guide by Eric Meyer)
>> Found it! ;-)
>> Check this out for all possibilities:
>> <http://www.student.oulu.fi/~laurirai/www/css/middle/>
>> By: Lauri Raittila
>
>
> erik.j's solution doesn't work? really? coz it works for me... using
> IE 7 and Firefox 2

When I clicked on the link provided, it brought me to the version using
overflow: hidden; and this one did not work.

The one also discussed by Ben and Neredbojias works.

--
Gus

Neredbojias wrote:

> Uh, text can be vertically-aligned to an image as in the following example.
> Dunno what else you mean.
>
> http://www.neredbojias.com/tsttst/vctst.html

It works great except that in the div these two items are not needed:
line-height:100%;vertical-align:middle;

--
Gus

On 21 Mar 2008, Gus Richter <gusrichter@netscape.net> wrote:

> Neredbojias wrote:
>
>> Uh, text can be vertically-aligned to an image as in the following
>> example. Dunno what else you mean.
>>
>> http://www.neredbojias.com/tsttst/vctst.html
>
> It works great except that in the div these two items are not needed:
> line-height:100%;vertical-align:middle;

Precisely. I just threw vertical-align:middle; on the image on the OP's
original markup without carefully checking all his mistakes, but I probably
should have removed those in the example.

--
Neredbojias
http://www.neredbojias.com/
Great sights and sounds

Ben C wrote:
> On 2008-03-21, kenneth02394832 <kenneth.kin.lum@gmail.com> wrote:
>> The same goes for text: (to vertically center the "Hello")
>>
>> THIS WON'T WORK: even if you add style="vertical-align:middle" to the
>> outer div, it won't work either.
>
> Vertical-align doesn't apply to blocks and isn't inherited, so no point
> in ever applying it to a div unless you've changed the div to display:
> inline or table-cell.
>
>> <div>
>> <span style="font-size:100px;">XY</span><span style="vertical-
>> align:middle">Hello</span>
>> </div>
>
> The second span is vertically aligned with respect to the "strut" of its
> container, which has normal font-size.
>
> If you add vertical-align: middle to the _first_ span, then the second
> one ends up roughly halfway up it.
>
> The reason this is all so counterintuitive is that both spans are being
> aligned to something that you can't see.
>
> The affect of aligning the big span is to move the top edge of the
> invisible imaginary inline parent which the second span is aligned
> relative to, relative to the containing div. So the second span (which
> is positioned relative to that imaginary inline parent) moves on the
> screen.
>
>> THIS ALSO WON'T WORK: even if you add style="vertical-align:middle" to
>> the outer div, it also won't work either.
>>
>> <div>
>> <span style="vertical-align:middle"><span style="font-size:
>> 100px;">XY</span>Hello</span>
>> </div>
>
> There too the word Hello is vertically aligned within its inline parent,
> which since it doesn't have one, is this so called "strut" of the div.
> That has normal line-height, so "Hello" doesn't move much.
>
>> NOW if the vertical-align is added to the big text portion, now the
>> small text is vertically centered... this is wrecking my brain right
>> now
>>
>> <div>
>> <span style="font-size:100px;vertical-align:middle">XY</span>Hello
>> </div>
>
> Yes exactly! It is very confusing.
>
> I will try to explain again.
>
> Vertical-align (on an inline box) aligns it with respect to its inline
> parent. The obvious case in which this makes sense is when you nest one
> span inside another. The two spans may have different font sizes.
> Normally the inner span's baseline lines up with that of the larger one
> (its inline parent), but you can move it up and down with
> vertical-align. The obvious time you might want to do this is for super
> or subscript.
>
> If an inline element doesn't have an inline parent (because its parent
> is a block), then it's treated as though it had an inline parent anyway,
> with the font-size that applies to the block. That imaginary inline
> parent is called the "strut".
>
> In this case, the strut is not particularly tall-- it has font-size:
> normal. The first span, the one containing XY, is lined up so that its
> middle is at the middle of the strut.
>
> The second span is lined up with its baseline at the strut's baseline.
> So why does the second span move up? Because the alignment of the first
> span causes the line box top edge to move down relative to the
> strut's baseline.
>
> Once both the spans have been lined up with respect to the strut, then a
> bounding box is drawn around the whole lot. That's the line box. The
> line box sits in the div with its top edge at the top of the div.
>
> The first span is the biggest thing on the line. It's therefore what
> determines the height of the line box. If it's vertical-align: baseline,
> it pushes the top of the line box up more than it pushes the bottom of
> it down. If it's vertical-align: middle, it pushes the top up less and
> the bottom down more.
>
> Here are some diagrams: http://tidraso.co.uk/misc/vertical-align.html

Great stuff Ben. Where did you get this "strut" thing from? Sounds like
something for my car.

--
Gus

On 2008-03-21, Gus Richter <gusrichter@netscape.net> wrote:
> Ben C wrote:
[...]
> Great stuff Ben. Where did you get this "strut" thing from? Sounds like
> something for my car.

It's mentioned in the CSS specification. Apparently it's a TeX term.

Ben C <spamspam@spam.eggs> writes:

> On 2008-03-21, Gus Richter <gusrichter@netscape.net> wrote:
>> Ben C wrote:
> [...]
>> Great stuff Ben. Where did you get this "strut" thing from? Sounds like
>> something for my car.
>
> It's mentioned in the CSS specification. Apparently it's a TeX term.

.... taken (by TeX) from the world of metal type where it was exactly
what you would expect -- a metal strut that was used to hold space
open in a layout.

--
Ben.

Ben Bacarisse wrote:
> Ben C <spamspam@spam.eggs> writes:
>
>> On 2008-03-21, Gus Richter <gusrichter@netscape.net> wrote:
>>> Ben C wrote:
>> [...]
>>> Great stuff Ben. Where did you get this "strut" thing from? Sounds like
>>> something for my car.
>> It's mentioned in the CSS specification. Apparently it's a TeX term.
>
> ... taken (by TeX) from the world of metal type where it was exactly
> what you would expect -- a metal strut that was used to hold space
> open in a layout.

Careful, you're taking a chance to be called a Dipstick. ;-)

--
Gus