为什么这个图像不是固定宽度的DIV中心？

Question

我知道我在这里遗漏了一些明显的东西... DIV有一个固定的宽度，图像有一个固定的宽度，这应该是一个快照......

<style>
  .featured {margin:0 auto;}
</style>
<div style='width:300px;border:solid 1px red;'>
    <img src='http://www.musicalads.co.uk/img/articles/image_64.jpg'
         class='featured' style='width:186px;height:215px;'>
</div>

你可以在这里玩它： http ： //jsfiddle.net/AHjAk/

Answer 1

你还需要添加display: block; 如果你计划使用auto左右边距对中图像

http://jsfiddle.net/AHjAk/1/

Answer 2

或尝试这个简单的text-align:center; 容器http://jsfiddle.net/AHjAk/2/

 <div style='width:300px;border:solid 1px red;text-align:center'>
<img src='http://www.musicalads.co.uk/img/articles/image_64.jpg' class='featured'>
</div>

Answer 3

尝试将text-align:center添加到应居中图像的父gif。

<style>
  .featured {margin:0 auto;}
</style>
<div style='width:300px;border:solid 1px red;text-align:center'>
    <img src='http://www.musicalads.co.uk/img/articles/image_64.jpg'
         class='featured' style='width:186px;height:215px;'>
</div>

如果你想让父母div本身居中，你的身体需要一个text-align:center 。