div垂直居中

如何将所有浏览器的div垂直居中？

由 北城余情 提交于 2020-04-06 01:54:39
问题： I want to center a div vertically with CSS. 我想用CSS将 div 垂直居中。 I don't want tables or JavaScript, but only pure CSS. 我不需要表或JavaScript，而只需要纯CSS。 I found some solutions, but all of them are missing Internet Explorer 6 support. 我找到了一些解决方案，但是所有这些解决方案都缺少Internet Explorer 6支持。 <body> <div>Div to be aligned vertically</div> </body> How can I center a div vertically in all major browsers, including Internet Explorer 6? 如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置 div ？ 解决方案： 参考一： https://stackoom.com/question/1f3R/如何将所有浏览器的div垂直居中 参考二： https://oldbug.net/q/1f3R/How-to-vertically-center-a-div-for-all

css和div

由 你说的曾经没有我的故事 提交于 2020-03-16 19:44:23
1.css：（Cascading style sheet） 使用css的原因： css能够实现内容与样式的分离。但是不容易在界面中维护，调整高度 等难度系数比表格大。 css后期维护，改变背景颜色，字体颜色等比较方便。 css精确的控制，实现精美 ，复杂的页面。 主要功能：美化网页，实现网页的布局，图片等的定位。（排版与风格设计 简化的web开发） 2.使用css基本格式： <head> <style> 选择器 {对象的属性：属性值} </style> </head> 选择器：就是所要修饰的对象； 3.标签的类型： 标签选择器：就是容器的名字 如<p>（直接写p{；；；}）就可以了。 类选择器：需要有.在修饰对象的前面。 如<p class="text"> .text{;;;;} ID选择器：需要#在修饰对象的前面。 如<div id="text"> #text{;;;;} 4.三种选择器的区别： 标签选择器：如果在body出现标签，全都修饰。 类选择器：主要有class标示。有class的地方就会被修饰。 ID选择器：ID选择器是唯一的，只能用一次。 5.选择器的优先级：ID选择器>类选择器>标签选择器 6. 标签css示例 <html> <head> <style> p{font-size:12px; color:#FFF；} </style> </head> <body>

DIV常用属性大全

由 余生颓废 提交于 2020-01-27 17:36:42
一、属性列表 color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 font-variant:small-caps 小字体 letter-spacing : 1pt 文字间距 line-height : 200% 设定行高 font-weight:bold 文字粗体 vertical-align:sub 下标字 vertical-align:super 上标字 text-decoration:line-through 加?h除线 text-decoration:overline 加顶线 text-decoration:underline 加底线 text-decoration:none ?h除连接底线 text-transform : capitalize 首字大写 text-transform : uppercase 英文大写 text-transform : lowercase 英文写 text-align:right 文字*右对齐 text-align:left 文字*左对齐 text-align:center 文字置中对齐 这些是一些简单的文字效果，可以应用到css的页面中。　 背景 background-color:black 背景颜色

实现div里的img图片水平垂直居中

由 匆匆过客 提交于 2020-01-26 02:55:05
body结构 <body> <div> <img src="1.jpg" alt="haha"> </div> </body> 方法一： 但是如果有flex布局，会影响vertical-align:middle失效 将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;}

css实现图片在div中居中的效果

由 我怕爱的太早我们不能终老 提交于 2020-01-25 06:24:17
　　利用图片的margin属性将图片水平居中，利用div的padding属性将图片垂直居中。 　　结构代码同上; 　　css代码如下： 　　div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;} 　　img {display:block; margin:0 auto;} 　　备注： 　　img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中;(有的设计师为图片再加个div标签，然后通过div标签的margin实现居中 　　思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。 　　结构如下： 　　 <style type="text/css"> div{ width:180px; height:180px; border:1px solid #000; position:relative; display:table-cell; text-align:center; vertical-align:middle; } div p{ position:static; +position:absolute;

DIV或者DIV里面的图片水平与垂直居中的方法

由 戏子无情 提交于 2020-01-23 04:46:34
<div class=“box”> 　　<img /> </div> 水平居中的常用方式： 　 　 text-align:center ——这可以实现子元素字体，图片的水平居中 。 　　 margin:0 auto —— 这是针对块元素的水平居中方法 垂直居中的常用方式： 　　 vertical-align: middle;——这个垂直居中属性，只对 inline 或者 inline-block 元素有效。 　　 这里没考虑flex的垂直居中的用法 div中图片水平和垂直居中方式： 　　 第一种方式 ： 直接手动计算的方式。已知box的高度和图片的高度 .box{ width: 300px; height: 300px; border: 1px solid red; text-align: center; } img{ width: 80px; height: 80px; padding-top: 110px; } 备注：这种方式是： 用box的高度减去图片的高度再除以2 ，就是padding-top的值，当然也可以使用margin-top，这样也可以实现图片在div里垂直居中。水平居中就用 text-align: center; 就行了。 　　 第二种方式 ： 图片已知宽高 1 img{ 2 　　　　position:relative; 3 　　　　top:50%; 4 　　　

不定宽高的div垂直水平居中

由 佐手、 提交于 2020-01-14 01:42:36
１．css3的flex 1 <style> 2 .ss { 3 display: flex; 4 justify-content: center; 5 align-items: center; 6 height:600px; 7 width: 1000px; 8 background-color: #3a9; 9 } 10 .sss { 11 width: 100px; 12 height: 100px; 13 background-color: greenyellow; 14 } 15 </style> 16 <body> 17 <div class="ss"> 18 <div class="sss"></div> 19 </div> 20 </body> 2. position:absolute <style> .ss { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; height:100px; width: 100px; background-color: #3a9; } </style> <div class="ss"></div> 3.position:absolute .ss { width: 200px; height: 200px; background

CSS中设置div垂直居中

由 Deadly 提交于 2019-12-29 00:04:18
在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。 Tips: 完美解决方案在文末！ 一、单行垂直居中 　　 如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。 1 2 3 4 5 6 7 如： div { height : 25px ; line-height : 25px ; overflow : hidden ; } 　　这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

div行内样式style常用属性

由 假如想象 提交于 2019-12-17 05:26:29
div 行内样式style常用属性 观看演示 下载源代码 〖 作者：Nimitz 〗〖 发布日期：2014-02-16 〗 一、常用属性： 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。 例： <div style="width:200px;height:200px;"></div> 3、margin:用于设置DIV的外延边距，也就是到父容器的距离。 例： 点击查看效果： <div style="width:300px;height:300px;"> <div style="margin:5px 10px 20px 30px;width:200px; height:200px;"> </div> </div> 说明：margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；可以看例子中的白色DIV到黑色DIV的边距离效果。还可以分别设置这四个边的距离，用到的属性如下： 4、margin-left:到父容器左边框的距离。 5、margin-right:到父容器右边框的距离。 6、margin-top: 到父容器上边框的距离。 7、margin-bottom:到父容器下边框的距离。 在标准的浏览器中，box模型首先确定的是content的宽度和高度，而margin和padding不会影响content的宽度和高度—

css让图片自适应容器（div）大小

由 ぃ、小莉子 提交于 2019-12-08 01:10:45
我们在写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况，下面我就开门见山的说明一下怎样去实现这样一个效果。 < div > < img src = "1.jpg" alt = "" > </ div > 1 2 3 备注一下这里的图片大小为200x200px div { width : 400 px ; height : 400 px ; border : 1 px solid #000 ; } img { width : 100 % ; height : 100 % ; } 1 2 3 4 5 6 7 8 9 不管容器有多大，只要将img的宽高设置成 100% （这里的100%是相对于父级宽高而言）就能自适应容器大小。 那是不是就这这么简单完事儿了呢？如果你不介意图片被放大后可能出现 失真 的话也的确是这样就ok了。 假如你介意 图片放大后会失真 ，我们可以改进上面的代码，只需要将img的样式简单修改 img { max-width : 100 % ; max-height : 100 % ; } 1 2 3 4 max-width:100%和width:100%的区别在于,max-width是相对于img自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽，在这里就是100px。而width的100%我们上面已经说过了是相对于父级宽度的
订阅 div垂直居中