首页 咨询中心 IT学堂
css图片和链接不在一行底部对齐时垂直居中对齐方法

css图片和链接不在一行,底部对齐时垂直居中对齐方法就是在就是在图片和文字所在的行中添加CSS属性:vertical-align:middle.有时如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于垂直居中呢,很简单,就是在图片和文字所在的行中添加CSS属性:vertical-align:middle;这样,它们在同一行就会垂直居中对齐了

如下列:

<!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>
 <title>让同一行内的图片和文字垂直居中对齐</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
 body{
   font-size:9pt;
 }
 #buttons *{
 vertical-align:middle;
 }
/*假如上边的不兼容火狐等,可以把下面这句也加上!
#buttons *{
 vertical-align:middle;
 }
*/
 </style>
</head>
<body>

<div id="buttons">
    <img src="/jscss/demoimg/200902/reg.gif">
    <img src="/jscss/demoimg/200902/login.gif">
    <a href="#"> <img src="/jscss/demoimg/200902/reg.gif">
找回密码</a>
</div><br>
上边的图片、文字是不是都垂直对齐了呢?
</body>
</html>

css图片和链接不在一行底部对齐时垂直居中对齐方法

专业网站建设做网站公司上联网络http://www.web258.cn

上一篇 fso读取和生成UTF-8文件时乱码问题解决方法
上一篇 在线qq不用添加就能对话和QQ不能临时会话,需要加好友的解决办法!
本方链接: http://www.web258.cn/article/show/i1258.html
ARTICLE 相关推荐