div 订阅
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。 展开全文
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
信息
常用操作
网站制作
类    型
软件
缩写
DIV
中文名
分隔,分割,划分
应用范围
软件,互联网
外文名
DIVision
DIV定义
可定义文档中的分区或节(division/section)。
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记
,那么该标签的作用会变得更加有效。注释:
是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。提示:请使用
元素来组合块级元素,这样就可以使用样式对它们进行格式化。
收起全文
精华内容
参与话题
问答
  • 最近写网页经常需要将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
    展开全文
  • CSS将div居中

    万次阅读 2020-06-17 19:46:32
    通过margin 将div居中 margin:0 auto;

    通过margin 将div居中

    margin:0 auto;
    
    展开全文
  • 实现div里的img图片水平垂直居中

    万次阅读 多人点赞 2017-03-31 09:53:09
    div> <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>
    

    效果都一样,希望能帮到大家!

    读后有收获并有兴趣的可以微信打赏哈哈:
    在这里插入图片描述

    展开全文
  • display:none"></div> </div> 如上:info 这DIV下面有两个主要的子DIV,column-div(默认显示)和line-div(默认关闭),还有两个button(控制line-div的显示和隐藏),现在希望info的宽度随着line-div的显示和隐藏...
  • 文本文字在DIV中垂直水平居中显示

    万次阅读 多人点赞 2018-01-17 15:24:06
    文字居中 垂直居中(vertical-align) 我们都知道有这么一个属性可以让图片,文本等在元素中垂直居中 vertical-align:middle;...vertical-align值有很多,常用的就是middle,bottom,text-bottom等,我们先说...

    已迁移到个博 Eighteen blog

    查看原文

    文字居中

    垂直居中(vertical-align)

    我们都知道有这么一个属性可以让图片,文本等在元素中垂直居中

    vertical-align:middle;
    

    vertical-align值有很多,常用的就是middle,bottom,text-bottom等,我们先说middle。

    vertical-align时而没效果

    然而真实使用的时候,我们会发现这个属性“时灵时不灵”,有些情况下我们加了这个属性之后仍然不见img或者text有任何的变化。那是因为vertical-align只作用在inline-block或者inline,还有table-cell等元素内。同时这两种还有所不同。

    1. 对于行内元素

      1. text-top
        使元素的顶部与父元素的字体顶部对齐。
      2. text-bottom
        使元素的底部与父元素的字体底部对齐。
      3. middle
        使元素的中部与父元素的基线加上父元素x-height(译注:"x"高度)的一半(交叉处)对齐。
    2. 对于table-cell 的常用

      1. top
        使单元格内边距的上边缘与该行顶部对齐。
      2. middle
        使单元格内边距盒模型在该行内居中对齐。
      3. bottom
        使单元格内边距的下边缘与该行底部对齐。

    vertical-align并不是在高度内居中,而是对齐在行高内的middle线上。

    所以我总结了两种使用vertical-align居中的方法:

    1. 第一种
    <div style="vertical-align: middle;display: table-cell;">
        <img src="02.jpg" alt="">
        <p>文本居中</p>
    </div>
    

    这种情况下图片和文字可以分行显示文字在图片下面同时图片和文字作为整体在元素内垂直居中。

    1. 第二种
    <div style="height:180px;line-height:180px;">
        <img src="02.jpg" alt="图片" style="vertical-align:middle;" />
        这是文本内容.
    </div>
    

    这种情况下文字是因为line-height属性而居中,同时img上的vertical-align:middle属性使其对齐在middle线上,如果父盒子去掉了line-height属性的话那么文字将不会再垂直居中。(可以试试bottom和text-bottom的不同。)

    1. Flex

      flex布局需要使用align-items来进行上下居中, 这个属性是父元素的属性, 可以统一设置子元素的上下对齐方式.

    .box {
    	display:flex;
    	align-items: center 
    }
    

    这样.box元素内的子元素是可以垂直居中的。那么要单独设置某个子元素的上下对齐方式的话需要使用align-self: center 这个属性. 它可以单独设置某个子元素的对齐方式, 且覆盖父元素的样式.

    .box {
    	display:flex;
    	align-items: center 
    }
    .child {
    	align-self: center 
    }
    

    水平居中

    text-align:center;
    

    over

    展开全文
  • html 中div垂直居中的三种方式

    万次阅读 2011-01-26 16:08:00
    1、第一种: <styletype="text/css"> <....con_div{ width:400px; height:300px; border:1pxsolid#777; text-align:center; display:table-cell; vertical-align:middle; back...
  • <div>............</div> </div> <div class="nav_con"> <div>............</div> </div> <div class="nav_foot"> <div>............</div> <div>.....</div> </div> </div> ``` 怎样获取...
  • vue 自定义select下拉框样式(div模拟)

    万次阅读 2020-05-11 14:58:03
    div class="divInput"> <div class="input" @click="openValue"> <input v-model="value" type="text" placeholder="筛选实验类型"> <img src="../assets/arrow.png" alt=""> </div>...
  • <!... ; charset=utf-8" /> <title>Demo: Payment Accounts .wrapper{ font:12px Arial;...<div class="wrapper"> ...但这样,问题就来了,最右边的div一定要指定很大的宽度,才能靠右,如果设置了float:right也不行。
  • HTML如何让IMG自动适应DIV容器大小

    万次阅读 多人点赞 2018-05-22 12:21:12
    HTML如何让IMG自动适应DIV容器...DIV样式(元素居中显示) IMG样式(横向拉伸,纵向自动匹配大小) width:100%; height:auto; DIV样式(元素居中显示) display:flex; align-i...
  • ``` <!... ...<script src="http://www.pc120xz.cn/scripts/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> ...<div id="top" style=...</div>在同一页面可以 但DIV浮动在iframe上时 失效 ```
  • MVC项目View中,现在有2个divDiv1和Div2 Div1是在页面一刷新的时候就会加载的 Div2是在js中执行初始化脚本时,append方法添加的 由于这两个div挨得近,所以Div2会覆盖住Div1(因为html加载好后,在执行的js中...
  • 但是因为我后面的代码中有js在<div id="box"></div>内 画图 (js图库的echart): var myChart = echarts.init(document.getElementById("box"),theme.name);  myChart.setOption(option); 这样执行之后就会...
  • 如何让你的html button本身居中呢?两种方法搞定。
  • ``` <!DOCTYPE html> <title></title> .logo1{padding:0px 0px ...<div class="logo1"></div> <div class="logo2"></div> ``` 俩个div同行,缩小浏览器窗口是总是一个将领一个覆盖。为什么
  • <div class="div1"> <div class="div2"> </div> <div class="div2"> 哈哈哈 </div> </div> ``` 在.div2的CSS里加入{overflow:hidden;}可以解决安卓设备的chrome和PC上的浏览器,但是在苹果...
  • 在页面body里有一main层div,里面有三块div:left,Middle,right;全部向左浮动,最左边两个left,Middle,固定宽度,让最后一个div自适应剩余的空间,理想图如图:![图片说明]...
  • 尝试给一个做好的网站修改页面,遇到了一个问题,比如我在页面中创建了一个DIV: ``` <div data-options="region:'west',title:'功能导航'" style="width:180px;overflow: hidden;"> <div id="navAccord" class...
  • ``` <!... ... div.main{width: 90%;... div.child1{display: inline-block;... div.child2{display: ... <div class="main"><div class="child1">这里有内容就会下滑</div><div class="child2"></div></div> ```
  • <div class="weui-cell" onclick="details(this);> <div class="weui-cell__bd"> <label>{{ useData[i].DATE_TIME }} </div> <div class="weui-cell__ft"> <p>{{ useData[i].DATA }} kWh </...
  • margin设置divdiv间距

    千次阅读 2016-04-11 19:30:04
    margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就可以使用margin样式实现上下2个盒子间距。 其实说白了padding就是内容与边框的空隙.而margin 则是模块与模块的空隙.下面图解: margin ...
  • <div class="dd-handle" id="li_Preliminary_Analysis">初步分析</div> <div class="dd-handle" id="li_Early_Disposal">先期处置</div> <div class="dd-handle" id="li_...
  • echo "<div class = $bar style='height:$heipx'><div class= bar_num>$countdata[$i]</div> <div class= bar_txt>$textdata[$i]</div></div>"; } ?> </div> 我想要不断定时刷新循环生成的DIV,我大概...
  • 我主要是想实现一个浮动窗体,当触发某种事件后div显示出来(默认为隐藏的),等几秒后又会隐藏,但是当鼠标进入该div后,div又一直显示,离开后才会慢慢隐藏,这该怎么实现呢,有人知道吗?? 我的代码如下: #...
  • <div id="showdiv"></div> <div class="kaoqin2"> 签到"> </div> () Dim showdiv showdiv=request("showdiv") Response.write showdiv End sub%> 如何将div 中“山西省太原市”值传过去,写入...
  • 有一个宽度为1200px的divdiv_father_1,设置了 overflow:hidden; div_father_1的子divdiv_child 宽度为1460px; 子divdiv_child里是由7个宽度为200px的div组成。内容是7张图片,间隔10px排列。 div_father...
  • 我有一个父级div,还有一个子级div 现在子div是一个浮动框,一般情况下是不显示的,当把鼠标放在父div的某个连接上时,子div作为浮动层显示出来 问题是父div的高度是固定的,且不能显示滚动条,不能随着子div的高度而...
  • <div class="find_txt_con">手机验证码</label><input type="text" placeholder="输入验证码"/><div id="v_container" style="width:110px;height:32px;float:right"></div></div> <p><input id="my_button" type...
  • <div class="digit"> </script></div> <span class="dash_title">days </div> <div class="dash hours_dash wow zoomIn" data-wow-delay="0.5s"> <div class="digit">hours</...
  • <div id="outadded_content"> <div class="outadded_menu"> ;width:80%;" src="../image/more.png" /> 菜单1 </div> <div class="outadded_menu"> ;width:80%;" src="../image/more.png" /> ...

空空如也

1 2 3 4 5 ... 20