正文 2269字数 82,669阅读

设置各对象的vertical-align属性，属性说明：
baseline－将支持valign特性的对象的内容与基线对齐 sub－垂直对齐文本的下标 super－垂直对齐文本的上标 top－将支持valign特性的对象的内容与对象顶端对齐 text-top－将支持valign特性的对象的文本与对象顶端对齐 middle－将支持valign特性的对象的内容与对象中部对齐 bottom－将支持valign特性的对象的文本与对象底端对齐 text-bottom－将支持valign特性的对象的文本与对象顶端对齐
Run code
Cut to clipboard

    在此设置为text-bottom即可实现图片与文字位于同一水平线上，好看多了
    css+DIV里面是文字和图片居中对齐
    <div> <div>文字与图片对齐方式<span style="vertical-align:middle;"><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<span style="vertical-align:baseline"><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<img src="b-grade.png"></div> <br> <div>文字与图片对齐方式<span style="vertical-align:bottom"><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<span style="vertical-align:sub"><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<span style="vertical-align:super"><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<span style="vertical-align:text-bottom"><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<span style="vertical-align:text-top"><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<span style="vertical-align:top"><img src="b-grade.png"></span></div> </div>
    Run code
    Cut to clipboard

      方法二：通常图片与文字放在一起的时候图片往往会偏上，通过设置margin-bottom可以达到文字图片底边对齐的目的
      我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题.(一般表现在图片总是比文字高点)

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

        或者在样式里面设置
        img { margin-bottom:-3px; }
        Run code
        Cut to clipboard

          这样文字和图片就居中了. 这个值随着图片的大小不同而改变,具体的大家测试一下就知道了.
          方法三：
          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; }
          Run code
          Cut to clipboard