How to center a div with BlueprintCSS?

Question

How to center a div with BlueprintCSS?

3.2k views Asked by randomguy At 24 November 2024 at 08:43

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 answers

**Fizz** · Answer 1 · 2012-02-06 01:41:34

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** · Answer 2 · 2013-08-14 10:52:38

Ferruccio On 14 August 2013 at 10:52

Blueprint has a "centered" style you can use:

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

**Mike Pennington** · Answer 3 · 2011-03-29 01:38:55

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** · Answer 4 · 2011-07-21 05:03:33

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>

TechQA.

How to center a div with BlueprintCSS?

There are 4 answers

Related Questions in BLUEPRINT-CSS

Popular Questions

Popular Tags

Trending Questions