CODEWITHSUNDEEP
csshtmlcenter
user3075987
user3075987

Reputation: 881

Center Image in div

I'm trying to center an image in a div I created. What am I missing here? I tried putting a style on the image, but that didn't work either.

http://jsfiddle.net/huskydawgs/8zs29/

  <div class="wrapper-data">
<div class="data_row">
  <div class="data_cell1_100">
        <img  width="450" height="509" src="http://oedblog.electricstudiolt.netdna-cdn.com/wpcms/wp-content/uploads/apple-e1382039006457.jpg" /></div>   
  </div>


.wrapper-data {
position:relative;
width:100%;
border: none;
margin: 30px 0 0 0;
overflow: hidden;

}

.data_row {
    height:100%;
    min-height:100%;
    white-space:nowrap;
    display:table;
}

.data_cell1_100 {
    width:100%;
    display:table-cell;
    white-space:normal;
}

.data_cell1_100 img {
    display:block;
    margin: 0 auto;
}

Upvotes: 0

Views: 132

Answers (2)

Arbel
Arbel

Reputation: 30999

.data_row also needs width:100%;

DEMO http://jsfiddle.net/8zs29/1/

Reason: Short and friendly, percentage width is relative to the parent element, you need to "pass it along" to your destination element. So if you intend to have the 100% width of the outer most element, in your case all of the width of the body with the 100% of the viewport, then all of the preceding elements should have the 100% width.

Upvotes: 4

n1kkou
n1kkou

Reputation: 3142

add width:100%; to div with the class .data_row

Upvotes: 1

Related Questions