您现在的位置是:网站首页> 编程资料编程资料
元素及文本的水平居中/垂直居中/绝对居中总结让图片 div居中实现代码CSS里的各种水平垂直居中基础写法心得总结css图片垂直居中 css中如何实现图片垂直居中css自适应宽度 多种方法实现宽度自适应的水平居中div图片垂直居中 如何使div中图片垂直居中css中margin:0 auto居中问题深入探讨div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)表单元素垂直居中完美解决方案元素及文本的居中(层的横向居中/层的垂直居中/绝对居中)三种方式实现元素水平居中显示与固定布局和流式布局概念理解
2021-09-07
857人已围观
简介 简单总结一下html中元素的 水平居中、垂直居中、绝对居中的实现方式,感兴趣的朋友可以了解下哦
一.层的横向居中
div2
复制代码
代码如下:要让div2在div1中横向居中,解决办法如下:
1.IE中,设置div1的样式:text-align:center;该方法在IE8以上版本和firefox中仅适用于行内元素居中(display:inline;和display:inline-block;及类似效果的元素以及文本,如inputimg等),子元素中的div、table等具有类似display:block效果元素将继承这个样式使文本居中,但是容器元素本身并不会居中。
2.IE7以上和firefox中,设置div2样式:margin:auto;仅对具有类似display:block效果的元素生效,对display为inline、inline-block的元素不生效,一般用于div、table等位置定位的容器元素,margin样式auto效果是横向居中,并置顶。
3.div2不能是position:absolute;绝对定位将使浏览器无法对元素自动排版,需依赖left、right属性,除非明确设定left:0,right:0;
综合以上:
复制代码
代码如下:#div1{
*text-align:center;/*ie*/
}
#div2{
margin:auto;
display:block;
*display:inline;/*ie*/
*zoom:1;/*ie*/
}
二.层的垂直居中
1.最常见的就是表格元素的vertical-align:middle;和css中的vertical-align:middle;
css中的vertical-align:middle;与表格的vertical-align不太一样,该样式作用于inline-block(或具有类似行内块状效果)的元素与其父元素内的文本或祖先元素内的文本(如果该祖先元素内的inline-block元素没有设置vertical-align样式)在垂直方向的对齐方式。
vertical-align无法影响后代元素的内容的对齐方式。
vertical-align对block元素不起作用,因为折行了在垂直方向没有对齐可言。
vertical-align作用于inline元素(如span)时,将决定该元素自身如何对齐于同一行内的inline-block元素,无法影响同辈元素或文本的对齐方式。
vertical-align取值为text-toptext-bottom时,对齐方式涉及文本的inline-box模型,
inline-box模型的高度由line-height(可以是继承来的)决定,分为content-area、top、bottom几个部分,其中的content-area是由文字大小决定,如果过line-height很大,font-size较小,加上背景颜色,我们就看到的背景色区域就是content-area,
text-top和text-bottom并不是可见的文字的顶端和底端(IE6-8在渲染text-top和text-bottom时,错误地将content-area的顶端和底端作为对齐的基准)。
具体的解释参考这里:
https://www.jb51.net/css/70053.html
一个例子,firefo、chrome与IE有差别:
复制代码
代码如下:复制代码
代码如下:##==================test==================
document.body.innerHTML='
##====================================
2.如果不想用table元素实现垂直居中,在IE8以上版本和firefox中,display:table-cell;可以让div以表格单元格的方式显示,设置样式为
#div2{display:table-cell;vertical-align:middle;},但IE6中不支持display:table-cell;
3、如果是单行文本,为了兼容IE6,可以使设置行高与div的高度一致#div2{heigh:100px;line-height:100px;}
4、对于多行文本,如果包含文本的div高度不固定,为了兼容IE6可以使设置top和bottom的padding为相同的固定值,div随文本内容增加而自动改变高度#div2{height:auto;padding:10px0px;}
三.绝对居中
1、利用百分比偏移和margin负值,该方法对所有元素生效,该方法兼容所有浏览器
复制代码
代码如下:Contenthere
2、利用绝对定位0偏移和margin:auto;,两侧偏移都被设置为0时,margin:auto将使内容居中,该方法对所有元素生效,该方法不兼容低于IE8的浏览器
复制代码
代码如下:Contenthere
3、利用50%偏移和负值偏移,支持所有浏览器
复制代码
代码如下:不使用table和不计算尺寸而且兼容IE6的垂直居中方法我没发现,有知道的同学望赐教。
四.文本挣开div的问题
默认情况下如果没有设置块状元素的高宽,块级元素宽度取最大值,高度取最小值。
IE6下,div内的内容(文本和元素)可以撑开div的高宽(定义了高宽的值),IE7以上版本和firefox都不存在这个问题
IE7以上版本支持min-heightmax-height,min-widthmax-width,因此在IE7或firefox等较新的浏览器是用min-heightmin-width可以达到IE6下自动撑大元素的效果。
相关内容
- css 提示框 CSS实现带箭头的DIV提示框HTML5+CSS3内置功能按钮提示框带有关闭小图标CSS3实现的提示框Tooltip动画效果DIV+CSS通过border样式制作带箭头提示框效果CSS实现带箭头的DIV(鼠标放上显示提示框)怎么用纯CSS制作带小三角的tooltip提示框用纯CSS实现的各种性感的信息提示框效果纯CSS打造Bubble气泡提示框实现代码CSS制作提示框 ‘正在加载请。。。。。’
- CSS3 icon font完全指南(CSS3 font 会取代icon图标)纯CSS3实现的动态天气小图标特效源码纯CSS3实现天气动画图标特效源码详解CSS中iconfont的使用使用icon fonts来辅助CSS处理图片CSS3制作ajax loader icon实现思路及代码使用css如何制作时间ICON方法实践z-blog用CSS定义分类RSS订阅图标CSS icon图标之纯CSS实现带动画效果的天气图标
- CSS优先级和!important与IE6的BUG讨论及解决方案浅谈CSS 权值 层叠 重要性(!important)css中提升优先级属性!important的用法总结从可维护性角度考虑css的!important规则的可用性强制CSS !important使用介绍css中!important的作用(IE6 IE7 FF)及其原理CSS下!important属性 CSS中提升优先级属性!important的用法问题总结
- IE6下CSS多类选择符优先级不起作用的bug分析及解决方法CSS选择器种类、优先级与匹配原理详解CSS控制样式的三种方式(优先级对比验证)CSS优先级的相关知识详细介绍网页css优先级为您详细解读css样式优先级及层叠的顺序排序探讨CSS层叠样式表之CSS解析机制的优先级及样式覆盖问题探讨CSS优先级和!important与IE6的BUG讨论及解决方案css样式的优先级究竟庞杂到什么程度css选择器优先级深入理解同级情况下CSS的优先级探讨
- 纯css3无js实现的Android Logo(有简单动画)css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 定义css设备类型-Media Queries图表简介及使用方法通过CSS3的object-fit来调整图片适配尺寸的技巧简介CSS计数器counter()的用法简介CSS中的伪元素简介简介CSS中的各种选择符Markdown.css样式简介CSS3 Columns分列式布局方法简介css3背景图片透明叠加属性cross-fade简介及用法实例
- IE7下父元素及子元素的隐藏顺序不当带来的display:none出现BUGIE/火狐/Chrome操作display:none对象所遇问题解答css元素隐藏原理及display:none和visibility:hiddenie9崩溃现象当js设置tr元素样式为display:nonedisplay:none和visibility:hidden的差别比较与演示代码如何通过 display:olck/none 完成一个菜单栏
- 元素及文本的居中(层的横向居中/层的垂直居中/绝对居中)让图片 div居中实现代码CSS里的各种水平垂直居中基础写法心得总结css图片垂直居中 css中如何实现图片垂直居中css自适应宽度 多种方法实现宽度自适应的水平居中div图片垂直居中 如何使div中图片垂直居中css中margin:0 auto居中问题深入探讨div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)表单元素垂直居中完美解决方案三种方式实现元素水平居中显示与固定布局和流式布局概念理解元素及文本的水平居中/垂直居中/绝对居中总结
- CSS的样式合并与模块化提高代码执行效率Css 模块化编码技巧CSS 模块化 实现方法CSS模块化思想的优势通过宜家的家具设计方法学习CSS模块化CSS模块化的理解css模块化的思想让后期维护变得简单CSS 模块化的理解CSS模块化设计——从空格谈起-CSS教程-网页制作-网页教学网css模块化方案
- CSS样式分离之再分离达到精简与重用设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法