摘抄:CSS如何实现单行图片与文字垂直居中

心已赠人 2022-06-03 04:57 237阅读 0赞

<table style="width:100%; table-layout:fixed"> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      以下选自（CSS权威指南） 
     <br> 
     <br> 
     <div> 
      <div> 
       <img alt="div css xhtml xml Example Source Code" src="http://hiphotos.baidu.com/machuan87/pic/item/2e8b1b34a6c89c775ab5f526.jpg" style="margin:0px 2px -3px 0px"> Example Source Code 
       <span style="color:#f7f7f7; font-weight:100">[www.mb5u.com]</span> 
      </div> 
      <div>
        vertical-align 
       <br> 初始值：　baseline（缺省值） 
       <br> 可否继续：否 
       <br> 适用于：　内联元素 
       <br> 说明：vertical-align:baseline使元素的基线同父元素的基线对齐． 
       <br> 警告：vertical-align不能影响表格单元中的内容的对齐，对于块元素中的内容也一样． 
      </div> 
     </div> 
     <br> 　　文字不多，但时常有人范错误，有人说我用了为什么没有效果呢？首行看一下他的代码． 
     <br> 
     <br> 
     <div> 
      <div> 
       <img alt="div css xhtml xml Example Source Code" src="http://hiphotos.baidu.com/machuan87/pic/item/a114faea839da99fd439c926.jpg" style="margin:0px 2px -3px 0px"> Example Source Code 
       <span style="color:#f7f7f7; font-weight:100">[www.mb5u.com]</span> 
      </div> 
      <div>
        ．style{vertical-align:middle;.....} 
       <span> WWW.MB5U_COM</span> 
       <br> HTML:&lt;div class="style"&gt;&lt;img src="地址" /&gt;...&lt;div&gt; 
      </div> 
     </div> 
     <br> 　　分析：从上面的代码可以看出错误就是把样式应用在块元素中了 
     <br> 　　我们只需要改样式为 
     <br> 
     <br> 
     <div> 
      <div> 
       <img alt="div css xhtml xml Example Source Code" src="http://hiphotos.baidu.com/machuan87/pic/item/ef6f05d34d6a294c3bf3cf26.jpg" style="margin:0px 2px -3px 0px"> Example Source Code 
       <span style="color:#f7f7f7; font-weight:100">[www.mb5u.com]</span> 
      </div> 
      <div>
        ．style img{vertical-align:middle;.....} 
      </div> 
     </div> 
     <br> 　　假如STYLE中有其它如INPUT或其它内联元素可写成 
     <br> 
     <br> 
     <div> 
      <div> 
       <img alt="div css xhtml xml Example Source Code" src="http://hiphotos.baidu.com/machuan87/pic/item/2f988500a0a0a5cbe850cd26.jpg" style="margin:0px 2px -3px 0px"> Example Source Code 
       <span style="color:#f7f7f7; font-weight:100">[www.mb5u.com]</span> 
      </div> 
      <div>
        ．style img,.style.input{vertical-align:middle;.....} 
       <br> 或．style *{vertical-align:middle;.....}/*在不影响其它元素的情况下使用这个通配符*/ 
      </div> 
     </div> 
     <br> 　　以上是在没有设置高度／行高的事情下，假如加入了高度和行高的事情下FF可以支持，IE6以下则不完全支持，看以下测试结果．（为了增加明显的效果对图片适当增加了高度） 
     <p>MB5U@COM</p> 
     <br> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>