OK, !@*&% CSS, Why Won't My Headline Center?
Asked by
ETpro (
34605
)
July 25th, 2010
This refers to the word JULY on http://www.rockonworkshop.org/10-07.html
I’m just rolling out this Event Calendar.
I’ve put the H1 headline for the month in a DIV. I set the div to text-align: center; and margin: 10px auto; but it stays left aligned. I looked at it in firebug and the div was collapsed to the width of its contents. So I added width: 910px; to my DIV, making it the full width of its container. But it still stays collapsed to the width of the content. I made its width declaration !important and still it stays collapsed.
I’m usually the one helping others solve CSS dilemmas here, but this one seems like it should be a no-brainer, yet it’s got me feeling like I’ve got no brain. What am I missing. I refuse to use a stupid table just to center a piece of content in a page.
PS, the XHTML errors a validator will display are outside my control. It’s a Yahoo! Store and Yahoo! puts some tracking JS on all its pages, and does so in a way that violates specs but does no harm. Fixing the XHTML errors is not the solution.
Observing members:
0
Composing members:
0
6 Answers
Response moderated (Unhelpful)
The only thing I can think is that you have div.one-col set to display: inline. When I remove that formatting (using Google Chrome’s developer tools), it does indeed center. (It also screws up something else – the last column of the calendar disappears, but I’m betting you can fix that once you’ve addressed the July thing….)
@MrItty Super keen eyes. The display: inline is needed for the rest of the calendar to work properly using UL and OL displays instead of just doing a table. But I bet locally setting the DIV to display: block; will block the problem from effecting it. off to test it.
(slight correction – you don’t have div.one-col set to display:inline. You have all children of div.one-col set to display:inline. And div id=“month” is a child of div.one-col.)
I went to:
#month {
width: 910px !important;
text-align: center;
margin: 10px 0;
display: block;
}
It works like a charm. The width statement isn’t needed at all so long as CSS sees the DIV as a block element. Thanks again.
very happy to help. It’s been at least 5 years since I did any web development. Good to know I haven’t completely lost my skills. :-)
Answer this question 
Composing members:
0
