- 常用操作
- 网站制作
- 类 型
- 软件
- 缩写
- DIV
- 中文名
- 分隔,分割,划分
- 应用范围
- 软件,互联网
- 外文名
- DIVision
-
HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
2017-08-11 18:25:02最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中...最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
水平居中直接加上<center>
标签即可,或者设置margin:auto;
当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法
放上示范的html代码:<body> <div class="main"> <h1>MAIN</h1> </div> </body>
- 方法一:
div使用绝对布局,设置
margin:auto;
并设置top、left、right、bottom的值相等即可,不一定要都是0。.main{ text-align: center; /*让div内部文字居中*/ background-color: #fff; border-radius: 20px; width: 300px; height: 350px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
效果如图:
- 方法二:
仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
.main{ text-align: center; background-color: #fff; border-radius: 20px; width: 300px; height: 350px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
- 方法三:
对于水平居中,可以使用最简单的<center>
标签,不过已经过时了,用法如下:
<p><center>123</center></p>
这个
<center>
标签就是相对于<p>
标签里的文字,可以使其居中。由于center标签已经过时了,所以正规一点的话还是不建议使用的,可以使用如下的方式代替:
<p style="text-align:center;">123</p>
欢迎大家加入QQ群一起交流讨论,「吟游」程序人生——YinyouPoet -
实现div里的img图片水平垂直居中
2017-03-31 09:53:09div> <img src="1.jpg" alt="haha"> </div> </body>方法一: 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。...body结构
<body> <div> <img src="1.jpg" alt="haha"> </div> </body>
方法一:
将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。<style type="text/css"> *{margin: 0;padding: 0;} div{ width:150px; height: 100px; display: table-cell; vertical-align: middle; text-align: center; border:1px solid #000; } img { width: 50px; height: 50px; } </style>
结果如下图所示:
方法二:
通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。<style type="text/css"> *{margin: 0;padding:0;} div{ width:150px; height: 100px; position: relative; border:1px solid #000; } img { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; margin-top: -25px; /* 高度的一半 */ margin-left: -25px; /* 宽度的一半 */ } </style>
结果如下图所示:
很久以前的文章了,看到浏览量这么高,我再补充几种实现方法
方法三:可以用在不清楚图片图片或元素的真实宽高情况下
还是通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半,如果不知道元素的宽高,可以用transform: translate(-50%,-50%);<style type="text/css"> *{margin: 0;padding:0;} div{ width:150px; height: 100px; position: relative; border:1px solid #000; } img { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style>
方法四:
<style type="text/css"> *{margin: 0;padding:0;} div{ width:150px; height: 100px; position: relative; border:1px solid #000; } img { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style>
方法五:弹性布局flex
<style type="text/css"> *{margin: 0;padding:0;} div{ width:150px; height: 100px; border:1px solid #000; display: flex; justify-content: center; align-items: center; } img { width: 50px; height: 50px; } </style>
效果都一样,希望能帮到大家!
读后有收获并有兴趣的可以微信打赏哈哈:
-
HTML(css+div)登录界面
2018-05-31 23:53:39HTML(css+div)登录界面(1)这是当时做的一个课程设计,很多人想要图片,在这里我把用到的所有图片资源分享下
(2)链接:https://pan.baidu.com/s/1nUX1DQe_aDZQMf2Zbblm_A
提取码:twcp<!doctype html> <html> <head> <meta charset="utf-8"> <title>login</title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap { height: 719px; width: 100; background-image: url(4.jpg); background-repeat: no-repeat; background-position: center center; position: relative; } #head { height: 120px; width: 100; background-color: #66CCCC; text-align: center; position: relative; } #foot { width: 100; height: 126px; background-color: #CC9933; position: relative; } #wrap .logGet { height: 408px; width: 368px; position: absolute; background-color: #FFFFFF; top: 20%; right: 15%; } .logC a button { width: 100%; height: 45px; background-color: #ee7700; border: none; color: white; font-size: 18px; } .logGet .logD.logDtip .p1 { display: inline-block; font-size: 28px; margin-top: 30px; width: 86%; } #wrap .logGet .logD.logDtip { width: 86%; border-bottom: 1px solid #ee7700; margin-bottom: 60px; margin-top: 0px; margin-right: auto; margin-left: auto; } .logGet .lgD img { position: absolute; top: 12px; left: 8px; } .logGet .lgD input { width: 100%; height: 42px; text-indent: 2.5rem; } #wrap .logGet .lgD { width: 86%; position: relative; margin-bottom: 30px; margin-top: 30px; margin-right: auto; margin-left: auto; } #wrap .logGet .logC { width: 86%; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } .title { font-family: "宋体"; color: #FFFFFF; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 使用css3的transform来实现 */ font-size: 36px; height: 40px; width: 30%; } .copyright { font-family: "宋体"; color: #FFFFFF; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 使用css3的transform来实现 */ height: 60px; width: 40%; text-align:center; } #foot .copyright .img { width: 100%; height: 24px; position: relative; } .copyright .img .icon { display: inline-block; width: 24px; height: 24px; margin-left: 22px; vertical-align: middle; background-image: url(%E7%94%B5%E5%AD%90%E9%82%AE%E4%BB%B6.png); background-repeat: no-repeat; vertical-align: middle; margin-right: 5px; } .copyright .img .icon1 { display: inline-block; width: 24px; height: 24px; margin-left: 22px; vertical-align: middle; background-image: url(%E5%9C%B0%E5%9D%80.png); background-repeat: no-repeat; vertical-align: middle; margin-right: 5px; } .copyright .img .icon2 { display: inline-block; width: 24px; height: 24px; margin-left: 22px; vertical-align: middle; background-image: url(%E8%81%94%E7%B3%BB%E6%96%B9%E5%BC%8F.png); background-repeat: no-repeat; vertical-align: middle; margin-right: 5px; } #foot .copyright p { height: 24px; width: 100%; } </style> </head> <body> <div class="header" id="head"> <div class="title">企业人事管理系统</div> </div> <div class="wrap" id="wrap"> <div class="logGet"> <!-- 头部提示信息 --> <div class="logD logDtip"> <p class="p1">登录</p> </div> <!-- 输入框 --> <div class="lgD"> <img src="img/logName.png" width="20" height="20" alt=""/> <input type="text" placeholder="输入用户名" /> </div> <div class="lgD"> <img src="img/logPwd.png" width="20" height="20" alt=""/> <input type="text" placeholder="输入用户密码" /> </div> <div class="logC"> <a href="index.html" target="_self"><button>登 录</button></a> </div> </div> </div> <div class="footer" id="foot"> <div class="copyright"> <p>Copyright © 2018 Qunar.com Inc. All Rights Reserved.</p> <div class="img"> <i class="icon"></i><span>联系邮箱:jiankangsun@yahoo.com</span> </div> <div class="img"> <i class="icon1"></i><span>联系地址:合肥工业大学</span> </div> <div class="img"> <i class="icon2"></i><span>联系电话:18355042634</span> </div> </div> </div> </body> </html>
-
HTML如何让IMG自动适应DIV容器大小
2018-05-22 12:21:12HTML如何让IMG自动适应DIV容器...DIV样式(元素居中显示) IMG样式(横向拉伸,纵向自动匹配大小) width:100%; height:auto; DIV样式(元素居中显示) display:flex; align-i...HTML如何让IMG自动适应DIV容器大小
为了让IMG自适应大小,如下我做了一个横向自适应的示例:
- IMG样式(横向拉伸,纵向自动匹配大小)
- DIV样式(元素居中显示)
IMG样式
(横向拉伸,纵向自动匹配大小)
width:100%; height:auto;
(纵向拉伸,横向自动匹配大小)
width:auto; height:100%;
DIV样式(元素居中显示)
display:flex; align-items:center; justify-content:center;
示例代码
如下是两个大小和比例都不同的图片,应用这个方法可以让图片自动填充并居中显示
<html> <head> <title>让图片自动适应DIV容器大小</title> <style> .ShaShiDi{ width:500px; height:400px; display:flex; align-items:center; justify-content:center; /*为了效果明显,可以将如下边框打开,看一下效果*/ /* border:1px solid black; */ } .ShaShiDi img{ width:100%; height:auto; } </style> </head> <body> <div class="ShaShiDi"> <img src="./1.png"/> </div> <div class="ShaShiDi"> <img src="./2.png"/> </div> </body> </html>
-
汇编div指令
2019-06-08 17:23:56div指令是除法指令。100001/100,100001是被除数,100是除数。一般格式为:div reg或div 内存单元,reg和内存单元存放的是除数,除数可分为8位和16为2种。 被除数:默认放在AX或DX和AX,如果除数为8位,被除数则为... -
div居中和div内容居中
2018-08-27 23:44:46一、div自身居中: 使用margin:0 auto 上下为0,左右自适应的css样式。 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠左(设置float:left)和div靠右(设置float:... -
html5:div 横向排列的方法。
2017-11-21 12:06:47div 横向排列的方法。 以下面这组 div 为例,wrap 的高度由内容撑开 <div id="wrap"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</... -
div嵌套div ,点击子级div不触发父级div点击事件
2016-12-06 15:31:47情况如下: ... 外层的div有一个点击跳转事件,按钮div也是一个点击事件用来隐藏整个div...解决方法: 在子级div上增加一个事件 onClick="event.cancelBubble = true",这样就可以只触发自身的点击事件了 -
在html中如何使div在页面中居中显示
2019-02-28 13:40:41在html中如何使div在页面中居中显示 ...尝试着写了一个html网页,结果就连div如何在页面中居中显示都查了好久才弄出来。其实我不知道为什么这样...代码如下(这是一个网页最外层div的css样式): #all{ width: 80... -
div覆盖div DIV相互重叠如何解决
2018-01-06 23:14:09http://www.divcss5.com/rumen/r674.shtml -
Html div 超出 父div区域
2019-08-23 16:14:58解决方法:在div里面添加下面一句 <div style="clear: both"></div> -
一个div盖住另外一个div,被盖住的那个div里面的一个子元素要盖住那个div怎么办
2019-04-26 20:25:28一个div盖住另外一个div,被盖住的那个div里面的一个子元素要盖住那个div 例如: div.a盖住div.b,div.b img盖住div.a -
DIV不换行与DIV换行 DIV默认自动换行
2017-08-02 08:24:47DIV不换行与DIV换行 DIV默认自动换行了解篇 DIV盒子默认是换行独占100%宽度: DIV盒子没有赋予CSS样式时,默认DIV盒子是独占一行(宽度为100%)。 如下默认情况HTML代码: > html> head> meta charset="utf-8... -
用js或者jquery动态给div追加内容,不覆盖之前的内容
2018-03-19 15:51:02div id="append">ss</div> <script> var divA = document.getElementById("append"); divA.innerHTML = divA.innerText+'追加的内容s'; //divA.innerHTML +='追加的内容s'; divA.inn... -
div p、div>p、div+p、div~p、div.a 、p,span的用法和区别
2019-01-22 11:08:37div p、div>p、div+p、div~p、div.a 的用法和区别 div p :将所有<div>标签里面的<p>标签选中(子标签和孙子辈标签) <style> div span{color:red;} &... -
html和css实现透明div上的div不透明,也可说父div透明,子div不透明
2016-07-11 10:26:36css:实现透明div上的div不透明,也可说父div透明,子div不透明,但这里并不是严格的父子关系,只是看起来像是父子关系。 一、方法一: (1)代码片段:... <style> div.background { width:500px;... -
JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)
2017-03-13 10:18:06一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding、Border 与 Margin 的宽度,四个加起来才是 div 真正占有的宽度。 JQUERY 获取 DIV ... -
div覆盖问题,div如何不被另一个div覆盖
2015-11-30 09:32:14MVC项目View中,现在有2个div,Div1和Div2 Div1是在页面一刷新的时候就会加载的 Div2是在js中执行初始化脚本时,append方法添加的 由于这两个div挨得近,所以Div2会覆盖住Div1(因为html加载好后,在执行的js中... -
让div占据父元素剩下的所有位置
2019-05-15 14:44:35现在有一个父容器,里面有俩个div,左边的要给一个固定的200px的宽度,父容器剩下的宽度都归右边的div该怎么完成? HTML代码: <div class="wrap"> <div class="left"></div> <div class=... -
div同行实现或div自动换行
2019-04-25 11:48:55使用"float:left"时,div会影响下一个div。"float:left"会让下一个div排在右边,当前div排在左边。 同行显示 <!DOCTYPE HTML> <html> <body> <div> <div style="float:left;display:... -
js鼠标悬停在a标签显示div,移走鼠标div消失,鼠标悬停在div上时div不消失
2018-10-12 04:17:49把鼠标悬浮在标签a标签上时,出现或隐藏div,当div出现之后,将鼠标移到div上的时候,div不消失鼠标还可以继续操作其他功能的代码如下: <a id="login-btn">按钮</a> &... -
div嵌套的div水平垂直居中
2019-03-18 23:33:58效果图如下: body代码: <div class="div-one"> <div class="div-two"></div> </div> css代码: .div-one{ width: 300px; height: 300px; positi... -
清空DIV
2018-09-25 15:20:37var div = $("<div>").addClass("col-md-12"); div.append("步骤"+(i+1) + ":"+array[i].resultInput); $("#inputContainer").... -
根据子div的id获取父div的id,在根据父div的id获取子div下input框的id
2018-12-17 16:57:47根据子div的id获取父div的id,在根据父div的id获取子div下input框的id html部分: var div = 100; function XXX(){ $(&amp;amp;amp;quot;#material&amp;amp;amp;quot;).append( “” + “”+ “&... -
div居中以及div中的元素居中
2018-10-23 14:45:29div居中以及div中的元素居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果。 div水平居中:设置margin的左右边距为自动。 1 div 2 ... -
jQuery查询div的子div数量
2019-03-04 18:40:08jQuery查询div的子div数量 页面示例: <div id="d1" class="c1"> <div id="dd1" class="cc1">1</div> <div id=&... -
div中嵌套div标签如何居中!
2019-03-25 21:44:43参考文档:http://www.divcss5.com/shili/s547.shtml <div class="top"> <div class="center"> <div class="left"></div> <div class="right"></div... -
div中加div,如果里面的div给margin-top,则外面的div就会整体下移,如何解决
2015-05-03 07:27:35div布局中:div中加div,如果里面的div给margin-top,则外面的div就会整体下移,如何解决 -
子div相对于父div位置放置
2019-08-19 09:52:441.将父div的position设置为relative 2.将子div的position设置为absolute ps:用得最多的是将一张图片作为背景的时候,背景图片设置为position:absolute,然后铺满div,其他div页设置为absolute。 ... -
让DIV中的DIV居中显示
2017-12-16 10:33:02发现前端div中的div不是居中显示的,网上说将父级DIV设置为text-align:center 子级设置为margin:0 auto,但是我试了下无效,不知道为什么。后来换了一种方法, 父级Divdisplay: flex; align-items: center; 子级...
-
PPT计时器.zip
-
用于硅太阳能电池的太阳磷(POCl)扩散
-
全网唯一的为GIS+BIM而生的cesiumjs或cesium视频教程
-
Qt模仿VS2015界面框架
-
人脑的NURBS曲面三维建模研究
-
华林科纳解析RCA湿法腐蚀清洗机及光刻机制造工艺.doc
-
基于物联网技术的设施农业自动控制系统
-
基于单片机的多功能智能小车机器人
-
Tableue 实现数据分组统计 - 依据连续度量创建数据桶
-
Spring 特训营手写篇
-
转行做IT-第8章 类与对象、封装、构造方法
-
Mediator.zip
-
Spring Boot2.X仿朋友圈PC版系统实战_架构1.0
-
基于物联网技术的矿井资产管理系统中的设计与实现
-
Python入门到项目直通车
-
微信支付V3版微信小程序支付C#版
-
Qt项目实战之基于Redis的网络聊天室
-
数据类型转换、运算符、方法入门
-
手势解锁-canvas-javascript实战
-
关于javaWeb项目下(jsp/html)页面和Servlet之间的互相访问的路径问题详解