文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。

方法一、

设置各对象的vertical-align属性，属性说明：

baseline－将支持valign特性的对象的内容与基线对齐

sub－垂直对齐文本的下标

super－垂直对齐文本的上标

top－将支持valign特性的对象的内容与对象顶端对齐

text-top－将支持valign特性的对象的文本与对象顶端对齐

middle－将支持valign特性的对象的内容与对象中部对齐

bottom－将支持valign特性的对象的文本与对象底端对齐

text-bottom－将支持valign特性的对象的文本与对象顶端对齐

在此设置为text-bottom即可实现图片与文字位于同一水平线上

     
      
       文字与图片对齐方式
       
      
      
      
       文字与图片对齐方式
       
      
      
      
       文字与图片对齐方式
       
      
      
      
       文字与图片对齐方式
       
      
      
      
       文字与图片对齐方式
       
      
      
      
       文字与图片对齐方式
       
      
      
      
       文字与图片对齐方式
       
      
      
      
       文字与图片对齐方式
       
      
      
      
       文字与图片对齐方式
       
      
     

方法二、通常图片与文字放在一起的时候图片往往会偏上，通过设置margin-bottom可以达到文字图片底边对齐的目的

我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题.(一般表现在图片总是比文字高点)

解决问题最好的办法：.一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来. 做法是把这个值设置为负数.例如我们把下面的16X15的图片设置它的

或者在样式里面设置

img {margin-bottom:-3px;}

这样文字和图片就居中了. 这个值随着图片的大小不同而改变,具体的大家测试一下就知道了.

方法三、

li{margin: 0px;padding: 20px 3px 3px 8px;background: url(images/sohu_06.jpg) no-repeat 0 50%;list-style-type: none;list-style-position: inside;}