仓酷云

标题: DIV教程之CSS让图片垂直居中和底端对齐的代码 [打印本页]

作者: 若相依 时间: 2015-1-16 00:12
标题: 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[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>
<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>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。

作者: 小魔女 时间: 2015-1-18 05:31
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 再见西城 时间: 2015-2-3 23:38
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 简单生活 时间: 2015-2-9 08:12
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 海妖 时间: 2015-2-27 05:09
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 飘飘悠悠 时间: 2015-3-8 23:46
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 金色的骷髅 时间: 2015-3-16 20:05
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 山那边是海 时间: 2015-3-23 05:05
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

欢迎光临仓酷云 (http://ckuyun.com/)