I'm doing my first 'mobile' web site, and I'm having difficulties
with centring text in the header.
I've got a logo floated left, and a header also floated left to
come up beside it and occupy all the remaining space to the right.
I want the header text to be centred within that remaining space
(whatever its width). However, I don't want to set a specific
width because I'm trying to keep the layout fluid.
http://www.holidaymullandiona.com/mobile/templates/hometemplate.html.php
gives an idea of what I'm trying to do (even when viewed on a
full-size monitor). The text 'Holiday Mull and Iona' should be
horizontally centred in the blue area to the right of the logo.
I'm viewing in FF6 at present.
I've tried several combinations such as <h1><span>Heading text
here</span></h1> with 'margin: 0 auto;' set on the span, but so
far obviously not the right one. I've also tried 'text-align:
center;', which worked on the UL below, but these have percentage
widths.
On 04/09/2011 20:42, Jay Tanna wrote:
I would change the #banner h1 style to look like this:
#banner h1 { /* float: left; */ background-color: #369; color:
#FFC20F; font-size: 150%; width: auto; text-align: center; }
You can't have float:left and text-align: center. In the above
style, I have commented out the first item and I suggest try it and
post back. hth
Thank you, yes it works. Of course now the H1 isn't floated its
background is tucked under the logo (as can be seen when I put an
outline on the H1). Despite this the H1 text is centred on the available
space (as required) and not across the full width of the parent element
(which would NOT be what I wanted). Counter intuitive ?
http://www.holidaymullandiona.com/mobile/templates/hometemplate.html.php
Further quick tests suggest to me that you can combine float:left with
text-align:center provided you stipulate a width for the element,
although of course in this case I wanted to avoid that.
Tim
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
