在文章段落之中经常会需要插入图片，在传统的表格式布局之中，往往是通过插入一个表格，表格中插入图片，并对表格应用align属性来控制图片居中、居左或居右显示，天津网站制作，天津做网站，天津网站优化，CSS布局之中誓我们的思路相同，但却可以将控制方式转到CSS代码中，并且通过CSS实现更多图文混排的效果。在开始图片排版前，我们准备了一段普通的文章页面，应用图片只需将图片插入到所有段落文字的最前面即可。
不过在这里我们对图片增加了—个div，事实上直接对图片应用样式也是可以的，但是考虑到本例中我们将会在随后在图片上增加一些细节排版，因此将图片区域设计为一个div块，对div块进行控制，就实现了对img对象的控制，接下来的代码将针对div进行设计，但如果直接应用在img对象上也是可以的。插入图片后的页面暂时效果如图。
当前的div知对象保持葦着divlv占据整行的显示方式，首先我们尝试图像居中。text-align属性用于控制对象内的内容居中显示，应用这个属性之后，img对象在div之中也能够保持居中状态。在实际应用中，有时也会应用文字绕图片的排版方式，这时就可以使用浮动定位的方法法，通过设定对象的float属性来使文字内容流入对象的旁边。
在图片居左之后，为了使得图片与文字有—定的空间，我们使div对象具有了lpx的内边距。同样，如果需要图片居中，也可以使用float:fight;来实现。如果需要图片出现在段落间的话，就必须将图片在代码中的位置转移到段落之中来实现。在实际应用图片时，常常也会需要在图片下方跟上图片的说明文字，这也是本例中使用iv来作为图片容器的原因。考虑到图片经常不会单独存在，因上经使用div之后，相当于将整个图片区域变成了一个小排版区如果有必要，可以在这个div之中加入其它内容，而在此基础之上， 便可以进行样式编写，便可以完成图片增加文字的样式果。琴。整个图片与文字之间的排版原理，都是建立在浮动定位的基础之上的，没有办法控制其浮动定位，但图片或div对象作为单独的个体是可以被我们所控制的，因此理解div与图片的定位之后，其他问题也就迎韧而解。