CODEWITHSUNDEEP
htmlcsscentering
Lepus
Lepus

Reputation: 587

center image in a square responsive container

I have a container (.inner). It contains a square div (.square) and is responsive. I need the image in it to be centered vertically and horizontally. I dont want to use background url property. My html markup:

<div class="thumb">
    <div class="square">
        <a href="">
           <img src=""/>
        </a>
    </div>
</div>

How my square works in css:

.thumb {
    position: relative;
    width: 100%;
    }

.square{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow:hidden;
    display: inline-block;
    vertical-align: middle;
    }

At the moment, I added a class to the image with javascript for landscape images to fit both portrait and landscape images with css to the square containers height and width.

img {
    max-width: 100%;
    height: auto;
    width: auto;
    }
img.landscape {
    max-width: none;
    height: 100%;
    width:auto!important;
    }

But i have no ideas how to center them. I already read a lot of articles here but none of them worked. Thanks for help

Here a picture of what im searching for, should also work vertical if possible: enter image description here

Upvotes: 1

Views: 5148

Answers (3)

Sara Mote
Sara Mote

Reputation: 236

If you'd like another non-JavaScript option, you could try setting flexbox on your container.

This is usually my approach for centering items both vertically as well as horizontally within a parent container.

.thumb {

  justify-content: center;
  align-items: center;
  display: flex;

}

This requires some prefixing to support all browsers, so is a little more involved to setup, but if it's a common element throughout your site is great to learn.

See http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

user2570380
user2570380

Reputation:

Your CSS is trying to center the .square itself and not the contained image. margin: auto; along with absolute positioning of the image does the trick.

This is a simple example showing how to center; you can modify it to suit your needs. The image's opacity is lowered to show that it is centered horizontally and vertically inside its container. The JavaScript animates the height and width of the container to simulate responsiveness.

http://jsfiddle.net/6py8o6b8/4/

TweenMax.to($(".square"), 2, {
  width: "100%",
  height: "250px",
  repeat: -1,
  repeatDelay: 1,
  yoyo: true,
  ease: "linear"
});
.square {
  border: 2px solid red;
  height: 100px;
  position: relative;
  width: 100px;
  margin: 70px auto;
}
img {
  position: absolute;
  top: -9999px;
  left: -9999px;
  right: -9999px;
  bottom: -9999px;
  margin: auto;
  opacity: 0.5;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="square">
  <img src="http://www.collativelearning.com/PICS%20FOR%20WEBSITE/stills%202/black%20screen.jpg" />
</div>

Upvotes: 4

A. Abramov
A. Abramov

Reputation: 1859

There are a few solutions, both in HTML and CSS.

CSS offers, as mentioned above, the display property - which is responsible for exacly what you are looking for. Try to play with it - for example:

.MyImageStyle
{
display: block;
// If this doesn't work, feel free to try inline-block, and the other possibilitys.
}

<div class="thumb">
<div class="square">
    <a href="">
       <img src="" class="MyImageStyle"/>
    </a>
</div>

The less graceful solution is in HTML - you can use tags around the image, which might work in some browsers at a certain display (but it does depend on the relative position of the element and size of the page). A good try might be 

<center> The rest goes in here </center>

Good luck!

Upvotes: -1

Related Questions