CODEWITHSUNDEEP
csshtmlimage
Diptopol Dam
Diptopol Dam

Reputation: 815

center an image in div vertically and horizontally

I found my tuts about centering image horizontally and vertically . But it is not working . my code are 

#parent {
    position : relative;
    float : left;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
}


#parent img {
    max-height :400px;
    max-width : 700px;
}

The height and width of image is dynamic.

Upvotes: 2

Views: 6851

Answers (6)

sandeep
sandeep

Reputation: 92803

Write like this:

#parent {
    position : relative;
    float : left;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
    text-align:center;
    line-height:400px;
}


#parent img {
    vertical-align:middle;
}

Check this http://tinkerbin.com/XYKUzvXu

UPDATED

Check this http://tinkerbin.com/GL4GaNfo

Upvotes: 8

Ashwin Singh
Ashwin Singh

Reputation: 7345

There was a syntax error nax-width : 700px; should be max-width : 700px;. Any ways use this CSS, it will work, yours won't.

#parent
{
   position : relative;
    float : left;
    display: table-cell;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
    text-align: center;
    vertical-align: middle;
}
#parent img
{
    max-height :400px;
    max-width : 700px;
}​

Ex here http://jsfiddle.net/ANwmv/

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

Use display:table-cell and vertical-align:middle and text-align:center

HTML

<div id="parent">
  <img src="http://s3.buysellads.com/1241308/100953-1333587587.jpg
"></div>

Css

#parent {
    position : relative;
    display:table-cell;
  vertical-align:middle;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
  text-align:center;
}


#parent img {
    max-height :400px;
    max-width : 700px;
}

Live demo

http://tinkerbin.com/RDZuJFS7

Upvotes: 0

user1432124
user1432124

Reputation: 

#parent {
    position : relative;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
}


#parent img {
    max-height :400px;
    max-width : 700px;
}

Upvotes: 1

Shailender Arora
Shailender Arora

Reputation: 7778

Hi you can get your desired results through display:table-cell; vertical-align:middle; & text-align:center; see the below code :-

HTML

 <div id="parent">
      <img src="http://dummy-images.com/abstract/dummy-107x160-RedDots.jpg" />
    </div>

CSS

#parent {
    display:table-cell;
    width : 700px;
    height : 400px;
    background-color: black;
    vertical-align:middle;
    text-align:center;
}


#parent img {
    width : 107px;
    height : 160px;
}

see the demo :- http://tinkerbin.com/ajsaa856

Upvotes: 0

Sean
Sean

Reputation: 6499

You should have 

text-align: center

on the #parent style to align the image horizontally, if I'm remembering correctly, you can also set this on the parent style:

line-height: 400px;

and this will align the image vertically.

Upvotes: 2

Related Questions