CSS让图片垂直居中和底端对齐的代码

本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐！更多内容请参考本站的CSS视频教程。 CSS使图片垂直居中的代码： <!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" lang="zh-CN"><head><title>图片垂直居中</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css" media="all">div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content[id]{display: table;position: static;}#middle{position: absolute;left: 0;top: 50%;}#middle[id]{display: table-cell;vertical-align: middle;position: static;}#inner{position: relative;left: 0;top: -50%;}</style></head><body><div id="content"><div id="middle"><div id="inner">垂直居中<br /><img src="http://www.jb51.net/images/logo.gif" _fcksavedurl="http://www.jb51.net/images/logo.gif" alt="脚本之家logo" title="脚本之家logo" /></div></div></div></body></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" lang="zh-CN"> <head> <title>图片垂直居中</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css" media="all"> div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content[id]{display: table;position: static;}#middle{position: absolute;left: 0;top: 50%;}#middle[id]{display: table-cell;vertical-align: middle;position: static;}#inner{position: relative;left: 0;top: -50%;} </style> </head> <body> <div id="content"> <div id="middle"> <div id="inner">垂直居中<br /> <img src="http://www.jb51.net/images/logo.gif" _fcksavedurl="http://www.jb51.net/images/logo.gif" alt="脚本之家logo" title="脚本之家logo" /></div> </div> </div> </body> </html> [Ctrl A 全部选择提示：你可先修改部分代码，再按运行] CSS使图片底端对齐的代码： <!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" lang="zh-CN"><head><title>图片底端对齐</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css" media="all">div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content div{position: absolute;left: 0;bottom: 0;}</style></head><body><div id="content"><div>底端对齐<br /><img src="http://www.jb51.net/images/logo.gif" _fcksavedurl="http://www.jb51.net/images/logo.gif" alt="脚本之家logo" title="脚本之家logo" /></div></div></body></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" lang="zh-CN"> <head> <title>图片底端对齐</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css" media="all"> div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content div{position: absolute;left: 0;bottom: 0;} </style> </head> <body> <div id="content"> <div>底端对齐<br /> <img src="http://www.jb51.net/images/logo.gif" _fcksavedurl="http://www.jb51.net/images/logo.gif" alt="脚本之家logo" title="脚本之家logo" /></div> </div> </body> </html> [Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

　　推荐阅读

　　CSS教程：div设置float后高度不自动增加

相关文章：http://www.jb51.net/css/divcss-4952.html 　　　　http://www.jb51.net/css/divcss-5991.html 本来想把这个题目修改为“闭合浮动元素”或“清除浮动元素”，但想了一下，还是>>>详细阅读

本文标题：CSS让图片垂直居中和底端对齐的代码

地址：http://www.17bianji.com/kaifa2/CSS/17373.html

1/2 1