How to center a div with BlueprintCSS?

3.3k Views Asked by randomguy At 11 February 2011 at 21:49

So I have div within the container class. How do I center the div, so that it properly adds empty space equally to both sides, depending on the width of the div?

<body>
  <div class="container">
    ... other stuff ...
    <div>center me</div>
  </div>
</body>

Original Q&A

There are 4 best solutions below

Mike Pennington On 29 March 2011 at 01:38

Normally you know the width of the page in span units because you define them when you build your blueprint-css file... so you could do something like this... "span-x" is the width of the segment or page in span units... "left" floats left, and "right" floats right... the two cancel and center the div.

<body>
  <div class="container">
    ... other stuff ...
    <div class="span-x right left last">center me</div>
  </div>
</body>

gtrak On 21 July 2011 at 05:03

You can do it like this:

<div class="span-6 last prepend-9 append-9">contents</div>

Fizz On 06 February 2012 at 01:41

Old question, I know but you could set the margin-left and margin-right of that div to auto. I believe that would do it.

Ferruccio On 14 August 2013 at 10:52

Blueprint has a "centered" style you can use:

<div class="span-10 centered">...</div>

How to center a div with BlueprintCSS?

There are 4 best solutions below

Related Questions in BLUEPRINT-CSS

Trending Questions

Popular # Hahtags

Popular Questions