Wanna play Fix My Code?
LATER THAT DAY: I took Wray Cummings’ advice in the comments below, which worked. So, now all the examples of uncentered HR statements in this post are in fact examples of centered HR statements, which makes the post rather mysterious. Imagine, if you will, then, that all of the little horizontal rules are left-justified. And, thanks, Wray!
I know I’m going to be embarrassed about this, but for months, if not for years, I’ve been unable to bend the simple <hr> element to my will. I can adjust its length, but I can’t get the little !@#$% to center itself.
I’ve tried everything I can think of to make it work:
<hr width=’100pt’ >:
<hr width=’100pt’ align=center />:
<hr width=’100pt’ align=’center’ />:
<hr width=’100pt’ style=’text-align:center’ />:
None of these work in Firefox or Safari. I have not intentionally redefined hr in any of my many CSS style sheets, but wouldn’t the local, inline setting take precedence anyway?
What incredibly obvious, embarrassing thing am I missing? Go ahead, make me look bad. And I’ll thank you for it.
Categories: tech
Here’s the funny thing- they all looked fine (centered) inside Google Reader, but when I came to this page, they are left aligned. Google knows how to fix it. I’m using Firefox 3, but unfortunately due to some AJAX-ey goodness that Google uses, I can’t view the source for the Google Reader snippet. I will try harder and report back…
Off the top of my head
?
not 100% sure on this, but at home I will see if it works.
I believe it has something to do with the rest of your page, not the HR-center tag alone. Create a separate html file with just one line (the HR center align line) and open it in Firefox. It will come out center-aligned. So the problem is in something else on this page that is not allowing it to center.
The centering syntax you’re using is deprecated, which is moot, since hr is centered by default
You’ve got hr in your style.css
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}
Explicit css centering would probably work
you ate my html
Sometimes the margins can collapse, even without margins set to 0 as Jonathan has pointed out, and your centering will look like it isn’t working. If you don’t want to monkey with your stylesheet for some reason, you could try breaking out of the 0-defined margins by giving your left and right hr margins a value of “auto” in your in-line styles. Let me know if you you try it and it works.
Jonathan’s hit on the problem, I believe. Your stylesheet override is the culprit. Try giving HR’s margin: 0 auto in your CSS.
Extracted from context and dropped into a standalone page your hr’s behave as expected — link
FireBug in FireFox 3.0 thnks the hr’s in the post are 100pt wide and so they very well may be centered. Or left or right justified.
In order to avoid potential blowback from changing a global css setting, something like –
div.entry hr {margin: 0 auto}
may give desired results sans undesired side effects.
Sure wish there was preview …
I made Wray’s change, It worked. Thank you!
So, CSS in style sheets overrides inlines style settings? Wow, that seems wrong to me! Or am I misunderstanding again? Still? Evermore?
Oh, wait. The page is picking up a margin setting from my style sheet, and that setting is rendering ineffective my inline alignment setting. If I set the margin locally, that would override the style sheet. Got it. I think.
These days… you don’t have to know anything… but how to formulate a good search in Google… Try this one:
hr tag center
I think the first result is a good one… didn’t have the time to read it… hope it helps.
Even my RSS reader (NewsGator Inbox) got it right. The first one spanned the page but the ones with align attributes (even the one with no quotes on the value) showed up as short and centered.
Of course, the RSS reader doesn’t use your CSS, so lacks the previously-unsolved problem.
> So, CSS in style sheets overrides inlines style settings?
No, it doesn’t
inline style overrides the external style sheet: it’s “cascade”
but text-align: center isn’t right specify to center the HR.
right way is margin: 0 auto.
in your external CSS:
hr{
/*clear: both;*/
margin: 15px 0 5px;
…
}
the right way is
margin: 15px auto 5px auto;
or, inline, if you wont to apply this only a single HR
bom-bom sex you ???