DIV教程之CSS让图片垂直居中和底端对齐的代码
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。本CSS教程供应了两种对齐体例即垂直居中对齐和底端对齐！更多内容请参考本站的CSS视频教程。
CSS使图片垂直居中的代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">
<head>
<title>图片垂直居中</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<styletype="text/css"media="all">
div,img{margin:0;padding:0;border:0;}#content{width:303px;height:404px;background:#F63;color:#000;font:12pxArial,Helvetica,sans-serif;position:relative;}#content{display:table;position:static;}#middle{position:absolute;left:0;top:50%;}#middle{display:table-cell;vertical-align:middle;position:static;}#inner{position:relative;left:0;top:-50%;}
</style>
</head>
<body>
<divid="content">
<divid="middle">
<divid="inner">垂直居中<br/>
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">
<head>
<title>图片底端对齐</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<styletype="text/css"media="all">
div,img{margin:0;padding:0;border:0;}#content{width:303px;height:404px;background:#F63;color:#000;font:12pxArial,Helvetica,sans-serif;position:relative;}#contentdiv{position:absolute;left:0;bottom:0;}
</style>
</head>
<body>
<divid="content">
<div>底端对齐<br/>
</div></div></body></html>
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
页:
[1]