3

I've searched EVERYWHERE and can't find an answer for this.

How can I vertically and horizontally center a div in a masonry layout? I basically want everything to build around this div.

Any help would be great!

http://isotope.metafizzy.co/

awe
  • 21,938
  • 6
  • 78
  • 91
user1160232
  • 98
  • 1
  • 8
  • http://stackoverflow.com/a/10010055/1312610 – ShibinRagh May 23 '12 at 04:14
  • You want to have one of the items masonry always has a central layout inside container (relative to the others items)? Or you want to masonry root-container was centered? – HEX Oct 25 '13 at 18:19

2 Answers2

12

When you call masonry you can use the isFitWidth: true and also then set margin: 0 auto on the container.

$container.masonry({
    columnWidth : 120,
    isFitWidth: true

});

See example live here : Centered Masonry

AGE
  • 3,752
  • 3
  • 38
  • 60
Layke
  • 51,422
  • 11
  • 85
  • 111
3

if it's just a div you could try to user 

margin: 0 auto;

for the horizontal centering.

to center vertically you could try this:

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Vince V.
  • 3,115
  • 3
  • 30
  • 45
  • Thanks, but I've already tried this prior to asking this question – user1160232 May 23 '12 at 04:10
  • so can you show the code you've already got ? It is possible to center it. (if you look at the examples of the plugin, you'll see that there are actually some sites that do it.) – Vince V. May 23 '12 at 04:12
  • None of the examples have a perfectly centered div in the middle. Some use the "cornerstamp" and some just appear to be centered. I'll work more on my code and I will post it tomorrow – user1160232 May 23 '12 at 04:30
  • @VinceV. your link went dead some time ago – AGE Dec 30 '15 at 20:09