Posted by Ben C on 12/02/07 14:52

On 2007-12-02, David Segall <david@address.invalid> wrote:
> Ben C <spamspam@spam.eggs> wrote:
>
>>On 2007-12-02, David Segall <david@address.invalid> wrote:
>>> I have a page heading
>>><http://www.profectus.com.au/ee_headingexample.html> which consists of
>>> an image followed by a word and they should occupy the leftmost 25% of
>>> the heading. The remainder is a background image which will fill the
>>> rightmost 75%. The leftmost image has a fixed size and I want the word
>>> to be vertically and horizontally centred in what remains of the
>>> leftmost 25%. Currently the word, "Rendezvous" insists on being at the
>>> bottom left of the remaining space. How can I reposition it? I don't
>>> need to support browsers more than a couple of years old.
>>
>>Put vertical-align: middle on the <img> preceding the span (the one
>>that's a picture of a clock).
> Thanks. That's much better but it is still left aligned. How can I
> centre it horizontally in the remaining space after the image?

I forgot you wanted that too. Then it gets a bit more complicated.

Make the <img> float: left, and remove vertical-align from it (as it is
now senseless).

Set text-align: center and line-height: 80px on the containing div. This
relies on the fact that your image is 80px high, but it is, so never
mind.

[Back to original message]