Search code examples
csshtmlalignment

div with image gallery will not align center

I have a portfolio, which I built myself with the help of lots of people and tutorials. I noticed that the actual gallery (currently featuring 8 thumbs) will not center. Especially when scaled to mobile size it looks a bit crook.

I wrapped the gallery in a div called 'imagewrapper' and gave it these properties;

.imagewrapper{
    width: 80%;
    margin: 0 auto;
    height:100%;
}

Does the width mess with the aligning of my div? The full code is here; http://kellyvuijst.nl. Would be great if you could send me in the right direction.

Solution

  • I would just make a few changes to your css:

    .imagewrapper{
    width: 80%;
    margin: 0 auto;
    height:100%;
    text-align: center; /* add this */
}

.mask {
    position:relative;
    height:180px;
    width:240px;
    box-shadow:0 0 1px #000;
    border:5px solid #f6f6f6;
    overflow:hidden;
    float:left; /* delete this */
    margin:15px;
    display: inline-block; /* add this */
}