CODEWITHSUNDEEP
htmlcss
user1851420
user1851420

Reputation: 465

Not able to center the image inside a div

I have an image inside a div, I want to center the image vertically and horizontally, tried different approaches like making container display as table and image as table-row etc.

Here it's not aligning vertically.

Here is my code:

 <div class="container">
     <img src='images/img1.jpg' class="imgclass">
 </div>

CSS:

.container {
    width: 70%;
    min-height:400px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.container img {
    max-height: 100%;
}

Upvotes: 0

Views: 81

Answers (6)

abir_maiti
abir_maiti

Reputation: 490

Take another div inside of .container and place image inside of it. Then making .container div's css rule to display:table and display:table-cell; vertical-align:middle for inner div will do the trick.

HTML

<div class="container">
    <div class="img-cont">
       <img src='http://fc08.deviantart.net/images3/i/2004/09/1/0/flower_eyes.jpg' class="imgclass">
    </div>
 </div>

CSS

.container {
    width: 70%;
    min-height:400px;
    overflow: hidden;
    position: relative;
    text-align: center;
    display:table;
    background:#ccc;
}

.img-cont{
    display:table-cell;
    vertical-align:middle;
}

.container img {
    max-height: 100%;
}

Here is a fiddle http://jsfiddle.net/v22rG/

Upvotes: 0

K K
K K

Reputation: 18099

If you know the dimension of the image, then following css will work for you:

img {
    width:250px;
    height:250px;
    margin:0 auto;
    display:block;
    margin-top:calc(50% - 125px);
    margin-top:-moz-calc(50% - 125px); /*for mozilla
    margin-top: -webkit-calc(50% - 125px); /*for webkit browsers.

}

You don't need any special style for container. This is the list of compatible browsers: http://caniuse.com/calc

Demo:http://jsfiddle.net/lotusgodkk/GCu2D/143/

Upvotes: 1

Albzi
Albzi

Reputation: 15609

You can use this absolute method:

JSFiddle

.container {
  width: 70%;
  min-height:400px;
  overflow: hidden;
  position: relative;
}

.container img {
  max-height: 100%;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}

This way, you don't need to change the structure of your HTML and it will always be in the center, no matter what height or width you give the element, or even if you re-size the page.

You also don't have to know the size of the image.

Browser Compatibility:

Chrome, Firefox, Safari, Mobile Safari, IE8-10.

Upvotes: 2

henrymason
henrymason

Reputation: 109

An easier solution would be to place the image as a background image inside the div

.container 
{
background:url('images/img1.jpg') no-repeat center center;
width: 70%;
min-height:400px;
}

You can also use the table inside the div and vertical and horizontal align the content of the table to center

<div class="container">
<table>
<tr>
<td style="vertical-align:center; text-align:center;">
<img src='images/img1.jpg' class="imgclass">
</td>
</div>

Upvotes: 1

T J
T J

Reputation: 43156

You can try absolute centering. Using this method, you don't have to alter your html or know the size of the image.

.container {
  position:relative;
  width: 70%;
  min-height:400px;
  overflow: hidden;
  text-align: center;
}
.container img {
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 margin:auto;
 max-height: 100%;
}

JSFiddle

Upvotes: 1

Jonas Grumann
Jonas Grumann

Reputation: 10786

If you only need ie9+ you can use transforms:

.container {
  width: 70%;
  min-height:400px;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.container img {
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

If you know the exact size of the image you can use negative margins instead of translate. The margins will be half the size of the image.

Upvotes: 0

Related Questions