图片与文字的排版比例要遵循黄金分割原理1：0.618黄金分割比是我们很早的时候就有学习到的，这也是目前在世界范围内都公认的最好构图比例，黄金分割率的页面比例可以给人带来视觉上的美感。这个是css图文混排的关键核心。
图文混排是版式设计中最常见的情况，图片与文字在传达版面信息上具有不同的特点，图片在视觉传达上可以辅助文字。
<p></p>代表的是一个段落容器，这个容器的style:text-align
决定了整个容器里元素的排版方式
而
vertical-align
属性是设置元素的
垂直对齐
方式。
说明
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
也就是说这两个属性的目标是不一样的，<p></p>以及其他父类容器假如定义了text-align属性，那这些容器内的子元素都按照这个排版方式来进行排版，而vertical-align只是影响设置了这个属性的元素。
其实CSS你要去看具体的属性有什么特性才能了解具体的内容
建议去
http://www.w3school.com.cn/
看看
实现div+css实现图片与文字水平对齐,首先需要的是用3个div布局，一个div包裹着其他的2个，给每个div设置好一定的宽度和高度，然后在对包裹的2个div使用float这个属性，float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。具体可以看下代码：<html>
<head>
<style>
#round{
width:600px
height:300px
}
#div1{
width:200px
height:250px
float:left
}
#div2{
width:200px
height:250px
float:left
}
</style>
</head>
<body>
<div id='round'>
<div id='div1'>
<img src='图片地址'>
</div>
<div id='div2'>
<p>我是测试文字</p>
</div>
</div>
</body>
</html>
