Centering a Horizontal Line

I can not figure out how to center all the orange horizontal lines. Any ideas; I’ve read every resource that I have and nothing is working? I’m using Joe Workman’s Divider stack in a Foundation project with the following CSS:

.orangeline { width:5%; height:2px;
background: #EE8121

Does Foundation not have alignment options for it’s divider? Seems like it should.

If not, add this to your “orangeline” CSS:

margin-left: auto !important;
margin-right: auto !important;

The divider stack appears to be setting left and right margins for each instance, which is why “!important” is needed.

It doesn’t and when I add the margin line(s) in, the element disappears.

Can you republish after adding it? Here’s a screenshot with that change made live in Firefox.
Looks like what you want, correct?


That’s weird. I went ahead and republished, but I changed the classes and dropped the stack for an html stack with the hr tag and it’s working fine now.


Hi Eric,

cool page. How are all the animations made/controlled?

1 Like

Assemble stack by @1LittleDesigner.


As @capetom says, it’s a cool page. Pity about those hideous solar panels! I’d go for Tesla’s or PVSlate if I had the money. :grinning:

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.