Posted by David Segall on 12/02/07 15:57

Ben C <spamspam@spam.eggs> wrote:

>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.
Thanks again. That works perfectly and I have posted the corrected
version as
<http://www.profectus.com.au/ee_headingexample_corrected.html> for
anyone who finds this via a web search.
> This
>relies on the fact that your image is 80px high, but it is, so never
>mind.
A helpful addendum and a nice way of putting it. I think I understand
what is happening but I don't think I would have arrived at your
solution without following a recipe. I wonder if I will ever write
HTML from a basis of logic rather than trial and error.

I have added "Ben C" to the Content Credits at
<http://www.profectus.com.au/credits.html>. If you would prefer to
make that your real name please send an email to the address on the
Contacts page <http://www.profectus.com.au/contact.html>.

[Back to original message]