CSS 图片在DIV中垂直居中的显示方法
来源:互联网 发布:dnf源码吧 编辑:程序博客网 时间:2024/04/26 15:20
vertical-align:middle;的作用
这篇文章重点写下vertical-align:middle;的作用
1、使用margin属性进行水平对齐
<!DOCTYPE html><html><head><style>.center{margin:auto;width:70%;background-color:#b0e0e6;}</style></head><body><div class="center"><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p></div><p><b>注释:</b>除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。</p></body></html>2、vertical-align:middle;属性的使用:
先看一下W3C上对vertical-align的定义:vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
必须承认这句话我看了很久才看懂说的是神马意思,我的理解是它有两种用法:
第一种用法,先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果给一个表格的td加一个vertical-align:middle的样式,表格里面的内容会垂直居中,同样的如果给一个vertical-align:bottom就会底部对齐,如果给一个vertical-align:top就会顶部对齐。
第二种用法,看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的,可以打个比喻:假设有两个行内元素a和b,a和b都是img,当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置,如下图:
如果a和b都加了一个vertical-align:middle样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图:
如果我想要让class="img404"的img在class="wall"的div里面垂直居中,我可以在div里面加一个span空标签,把它的高度设为100%,再给它一个vertical-align:middle样式,同样地给img一个vertical-align:middle样式,那么img就可以在div里面垂直居中了。如图:
接下来是我的demo:
使logo垂直居中显示:
html文件如下所示:
<!DOCTYPE html><html><head><title>用户登录</title><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="Keywords" content="界面设计"><link rel="stylesheet" href="C:\Users\Administrator\Desktop\ui\ui.css"></head><body><!-- 空一点 --><div id="ajax-hook"></div><!-- 整体页面div --><div class="login_wrap c1"><!-- 两大部分:1--头部,2--整体 --><!-- 头部div --><div class="login_title"><div class="log-hd"><div class="wpl"><div class="log-logo"><span></span><img class="logo-img" src="C:\Users\Administrator\Desktop\ui\log-logo.png" > </div></div></div></div><!-- 整体div --><div class="login_middle"> </div></div><!-- 底部div --><div class="login_footer"></div></body></html>css样式如下:
html,body {background-color: #eff3f5;}div { display: block;}#ajax-hook {position: fixed;top: 0;z-index: 99999;width: 100%;}.login_wrap{background-color: #1F72B4;height:650px;width:1423px;}.login_title{background-color: #53B232;height:120px;width:1423px;} .cl {zoom: 1;}.login_middle { position: relative;padding: 25px 0 0 0;z-index: 5;}.login_footer{background-color: #DD4F43;height:120px;width:1423px;}.log-hd { border:1px solid red; height: 120px; position: relative; background-color: #EFF3F5;}.wpl { border:1px solid red; width: 100%;}.log-logo{width:50%;height: 120px;margin:0 auto;border:1px solid red;}.logo-img{border:1px solid red;vertical-align:middle;}span{height:100%;display:inline-block;vertical-align:middle;}效果图如下:
这只是我练习时候的一点点小心得,后续知识继续补充。
- /CSS 图片在DIV中垂直居中的显示方法
- CSS 图片在DIV中垂直居中的显示方法
- CSS 图片在DIV中垂直居中的显示方法
- 纯CSS 图片在DIV中垂直居中的显示方法
- 图片在div中垂直居中的css
- CSS Div图片垂直居中的方法
- div中图片垂直居中的方法
- div+css中如何让图片垂直居中显示
- CSS图片在DIV中水平垂直居中
- css div中文字垂直居中显示
- DIV中图片垂直居中的css样式
- 在DIV中图片垂直、水平居中(最简单方法)
- 图片在div中垂直方向居中,垂直居中
- 如何设置图片、文字在容器(div)中垂直居中的显示?
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- 图片在div中垂直居中
- CSS在页面布局中实现div垂直居中的方法总结(转)
- c++ 关键字 typename 和 typedef
- js使用Console调试程序
- 时间加减(月份)
- tomcat zip版安装
- 配置sublime text 3的简单方法
- CSS 图片在DIV中垂直居中的显示方法
- 上传本地jar包到NEXUS MAVEN仓库
- 《新中国科学院造假一览表》是真的吗?
- 真机上运行monkeyrunner python脚本踩坑系列一
- Oracle 负载均衡解决方案
- notepad++ 正则表达式(记录)
- PC端纯css二级栏目导航条
- ubuntu16.04中将python3设置为默认及两个版本的切换命令
- js获取某年某月某天是第几周