css - 在 div 中居中图像

Question

我正在尝试将图像置于我创建的 div 中。我在这里错过了什么？我尝试在图像上添加样式，但这也不起作用。

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;
}

Answer 1

.data_row 还需要 width:100%;

演示 http://jsfiddle.net/8zs29/1/

原因: 简短而友好，百分比宽度是相对于父元素的，您需要将它“传递”到您的目标元素。因此，如果您打算让最外层元素的宽度为 100%，在您的情况下，主体的所有宽度都为视口(viewport)的 100%，那么所有前面的元素都应具有 100% 的宽度。