2

I'm trying out PureCSS for my website and it seemed like everything was going great. I opened it up in Firefox and noticed that my content wasn't centered.

You can view my site here.

The HTML/CSS is pretty simple. If I open the Inspector tool, I can see that my <div class="content pure-u-1 pure-u-md-3-5"> is rendered correctly at 60% width. If that's the case, then why isn't 

.content {
    margin: 0 auto;
}

centering my content in Firefox? Everything works fine in Chrome. It's been a while since I've done front-end stuff, but after some quick searches I see people still recommending margin: 0 auto; for centering, so I figure this has something to do with the grid framework? I also have everything set to box-sizing: border-box;.

telkins
  • 10,440
  • 8
  • 52
  • 79

2 Answers2

2

This appears to be a rendering inconsistency between browsers.

In the framework you are using, the grid elements are set to inline-block. The elements need to be block level in order for margin: 0 auto to have an effect and center the elements in FireFox:

.content {
    margin: 0px auto;
    display: block;
}

The culprit in the framework styles:

.pure-u-1, .pure-u-1-1, .pure-u-1-2, .pure-u-1-3, .pure-u-2-3, .pure-u-1-4, .pure-u-3-4, .pure-u-1-5, .pure-u-2-5, .pure-u-3-5, .pure-u-4-5, .pure-u-5-5, .pure-u-1-6, .pure-u-5-6, .pure-u-1-8, .pure-u-3-8, .pure-u-5-8, .pure-u-7-8, .pure-u-1-12, .pure-u-5-12, .pure-u-7-12, .pure-u-11-12, .pure-u-1-24, .pure-u-2-24, .pure-u-3-24, .pure-u-4-24, .pure-u-5-24, .pure-u-6-24, .pure-u-7-24, .pure-u-8-24, .pure-u-9-24, .pure-u-10-24, .pure-u-11-24, .pure-u-12-24, .pure-u-13-24, .pure-u-14-24, .pure-u-15-24, .pure-u-16-24, .pure-u-17-24, .pure-u-18-24, .pure-u-19-24, .pure-u-20-24, .pure-u-21-24, .pure-u-22-24, .pure-u-23-24, .pure-u-24-24 {
    display: inline-block; /* Culprit */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
0

What I am using for centring text is as follows:

.content {    
    width: 50%;    
    left: 50%;    
    position: absolute;   
    margin-left: -25%;    
    text-align: center;  
}

It works for all of the browsers I tested out including ff

To add on: It also shrinks text when you minimize browsers window.

AlwaysConfused
  • 729
  • 2
  • 12
  • 37