[Solved] Can't Center CSS "Polaroids" Photo Gallery within webpage

[Dromascott]

I’ve tailored this CSS Photo Gallery for my webpage but cannot get the ‘polaroids’ to center. I tried putting the whole section within a div and centering it but that didn’t work. Not sure where I’m going wrong here. Still very new at programming, so thanks in advance.

(http://www.themusicshop.com/lessonmain2.asp “Music Shop Performing Arts Center”)

(http://codepen.io/anon/pen/oxyAd “CodePen”)

[chrisburton]

I think you might want to start over. A lot of your markup and CSS will cause issues for you and is inefficient.

[Dromascott]

Which part of the CSS? Can you be more specific?

[chrisburton]

Is it completely necessary to use a grid system?

This will fix the issue:

.span-18 {
    width: 710px;
    margin: 0 auto;
}

And

.container {
    position: relative;
    display: inline-block;
    font-size: 0;
}

[Dromascott]

Well to be honest I’m not sure but, i love the way this gallery looks and functions. I need something editable and a bit interactive. If i can get them to the center that would great.

[Soren]

The div that contains the images has a class “column”. This class uses float: left and margin-right: 10px

You’d want float:none and margin-right: 0 for the specific div you want centred.

Edit: Or just remove the class “column” from the containing div and add a “clearfix” class!

https://css-tricks.com/snippets/css/clear-fix/

[chrisburton]

Except that you’re using <br> tags like crazy. You’re using multiple divs to align things that could simply be done with a single element (wrap class). A lot of your markup is just not necessary.

[Dromascott]

Understood. I will work on cleaning up once i fix the centering issue. I’m still new at programming and learning on the go so I know my code is sloppy. Thanks guys

[Soren]

Hey did you not see this?

http://codepen.io/soren-tree/pen/IuwgD

[Dromascott]

Yep I did. Thanks Soren

[Dromascott]

Fixed! Thank you very much. So basically it was column within a column and both were floating left?

[Author]

Posts