CSS让图片垂直居中和底端对齐的代码
98 浏览量
2020-12-10
20:01:43
上传
评论
收藏 31KB PDF 举报
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://huoche.7234.cn/images/jb51/jlhoc5w2ycn.gif"
_fcksavedurl="http://huoche.7234.cn/images/jb51/jlhoc5w2ycn.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">
资源评论
weixin_38570145
- 粉丝: 4
- 资源: 924
最新资源
- apk.tw_LineLite_v8a_v.2.17.1_sign.apk
- Elasticsearch实战：构建高效搜索系统的秘诀.zip
- HTML+CSS+JS网页设计：从入门到精通.zip
- 数据库课程设计：从理论到实践的全面指南.zip
- Python闭包：深入理解与应用场景解析.zip
- Win64OpenSSL-3-3-0.exe
- 课高分程设计-基于C++实现的民航飞行与地图简易管理系统-南京航空航天大学
- 航天器遥测数据故障检测系统python源码+文档说明+数据库(课程设计)
- 北京航空航天大学操作系统课设+ppt+实验报告
- 基于Vue+Echarts实现风力发电机中传感器的数据展示监控可视化系统+源代码+文档说明(高分课程设计)
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
