Blueprint CSS centering in grid

Question

Just started using Blueprint CSS and now playing with the grids but have a simple problem. I created a navbar at the top of my page with each link 2 columns wide (using span-2). What is the right way to center these links inside the grid columns without hacking away at the css.

<div id="navbar" class="container showgrid">  
    <div class="span-2 border">  
        <a href="news" class="caps">News</a>  
    </div>  
    <div class="span-2 border">  
        <a href="gigs" class="caps">Gigs</a>  
    </div>  
    <div class="span-2 border">  
        <a href="tunes" class="caps">Tunes</a>  
    </div>  
    <div class="span-2 border">  
        <a href="mailing-list" class="caps">Email&nbsp;List</a> 
    </div> 
</div>

score 3 · Accepted Answer · answered Feb 20 '12 at 21:36

I would create a helper class like this:

css:

.text-center{ text-align:center; }

html:

<div class="span-2 border text-center">  
    <a href="news" class="caps">News</a>  
</div>  
<div class="span-2 border text-center">  
    <a href="gigs" class="caps">Gigs</a>  
</div>

Blueprint CSS centering in grid

1 Answers1