How to center a div with BlueprintCSS?

Question

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>

score 5 · Answer 1 · answered Jul 21 '11 at 05:03

5

You can do it like this:

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

answered Jul 21 '11 at 05:03

gtrak

5,598
4
32
41

score 1 · Answer 2 · answered Aug 14 '13 at 10:52

1

Blueprint has a "centered" style you can use:

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

answered Aug 14 '13 at 10:52

Ferruccio

98,941
38
226
299

score 1 · Answer 3 · answered Mar 29 '11 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>

score -1 · Answer 4 · answered Feb 06 '12 at 01:41

-1

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.

answered Feb 06 '12 at 01:41

Fizz

3,427
4
27
43

How to center a div with BlueprintCSS?

4 Answers4