CSS实现同⼀⾏的图⽚和⽂字垂直居中对齐的⽅法
本⽂实例讲述了CSS实现同⼀⾏的图⽚和⽂字垂直居中对齐的⽅法。分享给⼤家供⼤家参考。具体分析如下：
有些朋友会发现，如果⼀⾏内容中有图⽚有⽂字的话，⽂字往往会⾃动的底部对齐，影响美观，那如何让它们相对于垂直居中呢，很简单，就是在图⽚和⽂字所在的⾏中添加CSS属性：vertical-align:middle；这样，它们在同⼀⾏就会垂直居中对齐了。
复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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="#">回密码</a>
</div>
上边的图⽚、⽂字是不是都垂直对齐了呢？
css实现垂直水平居中</body>
</html>
希望本⽂所述对⼤家的div+css⽹页设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。