html - 为什么此图像不在固定宽度的 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.