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

显示全部楼层 · 发表于 2015-1-16 00:12:04

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。
本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或者是火狐，您的网站都能很好的兼容。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之CSS让图片垂直居中和底端对齐的代码

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子