html教程
css教程
前端开发
cms教程
seo优化
网页设计
服务器
数据库
平面设计
电脑教程
编程教程
互联网
移动开发
php编程
java编程
建站技巧
Python编程
CSS让图片垂直居中和底端对齐的代码
时间:2016-03-28
本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 全部选择 提示:你可先修改部分代码,再按运行]
上一条:如何实现FireFox文本自动换行
下一条:DIV CSS布局浏览器兼容的问题
相关文章
让网页标签页头部有新消息提醒和Title标题文字滚动显示效果
demo展示1: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w
JQuery获取文章内容页自适应高度,优化界面外观
如何用js得到当前页面的url信息方法(JS获取当前网址信息)
设置或获取对象指定的文件名或路径。alert(window.location.pathname
分享js跳转页面方法
spanid=tiao"
jquery对单位进行换算的“笨”方法
DEDE项目上 编辑软件大小(单位换算):$(doc
JS简单页面倒计时转跳
script language="javascript"&g
最新文章
js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 p 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了
何为百度移动网站MIP?MIP对网站有什么帮助?
随着移动互联网的发展,网友们对于移动产品服务体验要求也越来越高,当然了像移动网站体验也包括在内,随着互联网技术的发展,现在移动网站页面技术也一直在提升和创新,今
js实现点击按钮复制文本功能
如何去掉html中input的边框
js 判断字符串中是否包含某个字符串
织梦DedeCms做SEO优化必做的步骤
video标签设置autoplay在手机浏览器无法自动播放视频的解决方案
让网页标签页头部有新消息提醒和Title标题文字滚动显示效果
怎么拿到input file上传的文件名字显示到页面中
何为百度移动网站MIP?MIP对网站有什么帮助?
swiper无法自动播放的解决办法
bootstrap在移动浏览器下响应式不起作用的解决方法