Search code examples
htmlcssimageoverflowcenter

Horizontally center images which overflows their container

I am trying to center some images (horizontally) which overflows their container divs.

The containers (and images, for that matter) have a height of 160px and I want to keep them with that height, even at smaller screen-sizes - but still keep the image horizontally centered.

I have tried margin: 0 auto; with no luck.

I came across an half-solution where it was suggested to use text-align: center; on the container div along with margin: 0 -100%; on the image itself. However this solution seems to only work with webkit based browsers.

In eg. Firefox the result is this: The images are moved to the left in their containers and not centered

HTML:

<div class="row-fluid">
    <div class="span6">
        <a>
            <img src="image1.jpg">
        </a>
    </div>
    <div class="span6">
        <a>
            <img src="image2.jpg">
        </a>
    </div>
</div>

CSS:

.span6{
    height: 160px;
    overflow: hidden;
    text-align: center;
    padding: 0;
}


.span6 img{
    height: 160px;
    width: auto;
    margin: 0 -100%; /*Only works for webkit based browsers*/
}

Any ideas? Thank you in advance.

.

EDIT:

I found out that editing margin: 0 -100%; to margin: 0 -50%; did the trick (both in Chrome, Firefox, IE, etc). However I am going with Andrey's solution since it is more likely cleaner, I assume.

Solution

  • May be this will help

    .span {
    display: flex;
    align-items: center;
    justify-content: center;
}