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,136
  • 6
  • 77
  • 87
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,604
  • 3
  • 35
  • 58
Layke
  • 48,667
  • 10
  • 83
  • 110
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,099
  • 2
  • 28
  • 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