CSS如何使图片和文字垂直居中对齐2010-07-27
今天来写点有关CSS的小东西。
前端开发中写过css代码的都知道这么一回事，有时候需要一个DIV块里需要放图片与文字时总是会出现图片与文字对不齐的情况。如下图所示：
同时css与html代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Tonjay'Blog</title>
- </head>
- <style>
- #tonjay{height:19px; width:200px; font-size:12px; border:1px solid #000;
- </style>
- <body>
- <div id="tonjay"><img src="bnt_search.gif" width="52" height="19" />一只人异想世界</div>
- </body></html>
有文字的时候我们用：line-height属性，但是这玩意儿不能定义图片！如果再给图片和文字各加个块级元素，这样又显得代码繁琐。
这个时候其实只要再加一句css就可以解决产问题了：
- <style>
- #tonjay{height:19px; width:200px; font-size:12px; border:1px solid #000;
- #tonjay *{ vertical-align:middle;}
- </style>
PS:或许这都是些老生常谈的问题了，但是放出来对别人对我总是有益的……
转载文章请保留博客名称及本文链接，谢谢合作！转载已注明非原创文章请注明原文地址及本博客相关信息。
9条评论 »