<img>标签是内联块元素,特点和内联元素（行内元素）一样都在同一行上显示,但是它的宽度、高度、行高以及顶和底边距和块状元素一样，你上面代码div样式包括2个div,图片和文本一样都会在同一行上显示，所以两个div都用了行内标签属性.

首先呢 ，text-align:center是指使父元素里面的文本居中，这里主要是讲块状元素的居中，你试试

width:200px;

margin:20px auto;

这两行，你把宽度200px改成400px 之后，你会发现文字并没有居中，而是这个块状元素一直处于居中，这时候，你把框里的文字设置text-align: center;，才有居中。

你这章节要设置居中的东西都理解错了 

你概念都搞混了，text-align:center是指使父元素里面的文本居中，上面的文字与图片都属于div的文本。而这个div没设置宽度，没设置宽度的块元素默认是100%宽，也就是与浏览器一样宽。。你不信在样式里面加一个width：700px,你看看效果。。然后再加一个margin：0  auto;

系统召唤来的：

我也想过这个问题，也实验了，虽然是居中，但是我的理解是，为了防止程序出错，最好按照甲鱼的臀部：“龟腚”来。

举个例子，比如python中的缩进，有时候错误缩进虽然程序不会报错，但是后期运行就会出现难以找到的错误。

所以，还是按照程序来吧。