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

I know I'm missing something obvious here... the DIV has a fixed width, the image has a fixed width, this should be a snap...

我知道我错过了一些明显的东西... 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>

You can play with it here: http://jsfiddle.net/AHjAk/

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

3 个解决方案

#1

You'll also need to add display: block; to the image if you plan on centering it using auto for its left/right margins

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

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

#2

or try this simple text-align:center; the container http://jsfiddle.net/AHjAk/2/

或尝试这个简单的文本对齐:中心;容器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>

#3

Try adding text-align:center to the parent gif that should center the image.

尝试将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>

And if you want to center that parent div itself, your body needs a text-align:center.

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

#1