On 9/5/11 3:27 AM, Tim Dawson wrote:
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.
[...]
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
On 05/09/2011 17:02, David Hucklesby wrote:
If you are as confused about this behavior as I was, I think I found the
explanation. While the H1 element, being block level, spans the entire
header, the float displaces the line-box that contains the text - the
text is centered inside this line-box, not the block...
I think. :)
That certainly seems a very good explanation of what one sees. Thank you.
Tim
______________________________________________________________________
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/
