div元素宽度不定的情况下如何居中显示
最近由于工作的原因碰到一个问题,就是在一个弹窗宽度不定的情况下还能是该弹窗居中显示,思考许久未找到合适办法,于是在网上找到一些办法在此总结记录下来方便以后的学习。
方法一:兼容IE67,但是当元素宽度大于50%时,会出现滚动条。
<div class="father">
<div class="child">这个是需要剧中的元素,宽度不确定</div>
</div>
.father {
display: inlien-block; //使.father得宽度适应.child的宽度
background-color: grey; // 方便看到.father元素
position: relative;
left: 50%;
}
.child {
position: relative;
left: -50%;
}
效果如下:
思路如下:
外层设置为float:left或者display:inline-block,然后设置相对定位,left:50%,这样左边位置就偏移到了中间的位置;然后内层设置相对定位,left:-50%,这样正好向左偏移自身宽度的一半,实现了居中。
方法二:兼容ie67
<div class="father">
<div class="child">这个是需要剧中的元素,宽度不确定</div>
</div>
.father {
text-align: center; //设置该属性是为了让.father里面的 **内联** 元素居中。
}
.child {
display: inlne-block;
border:1px solid red;
*display: inline; /*主要用于激活IE中的hasLayout属性,兼容IE67*/
*zoom:1; /*主要用于激活IE中的hasLayout属性,兼容IE67*/
}
效果如下:
思路如下:
外层使用text-align为center是为了让里面的内联元素居中,很显然在外层设置text-align:center后,我们让里面的元素变成内联元素即可,则可以对里面元素使用display:inline-block;*display:inline(兼容IE6-7)。
IE浏览器的hasLayout属性,参考:https://baike.so.com/doc/6747002-6961548.html
未知元素水平垂直居中,参考:http://demo.doyoe.com/css/alignment/, https://www.cnblogs.com/jogen/p/5213566.html
div元素宽度不定的情况下如何居中显示的更多相关文章
- 编写高质量代码改善C#程序的157个建议——建议16:元素数量可变的情况下不应使用数组
建议16:元素数量可变的情况下不应使用数组 在C#中,数组一旦被创建,长度就不能改变.如果我们需要一个动态且可变长度的集合,就应该使用ArrayList或List<T>来创建. 而数组本身 ...
- div样式text-align在子元素缩进不规范的情况下,chrome出现的问题(貌似结果是inline-block导致的)
在调css的时候,发现居然有firefox实现效果完整而chrome出现问题的情况: 详细情况:segmentfault1 segmentfault2 全文表达: <html><he ...
- div在不固定高度的情况下垂直或者水平居中
方法一: 用一个"ghost"伪元素(看不见的伪元素)和 inline-block / vertical-align 可以搞定居中,非常巧妙.但是这个方法要求待居中的元素是 inl ...
- laravel项目return back()->withErrors($validator)或return back()->with('errors','原密码错误!')在前台原密码错误的情况下不能正确显示错误信息,变成报错!
被折磨的答案是 php artisan --version看一下版本,如果是5.2.26以上的,在路由处删除web中间件分组,还有问题再反馈
- 转:CSS设置HTML元素的高度与宽度的各种情况总结
1.元素不设宽度第一种情况:元素为文档流中元素<!-- 父元素宽度为100px --><div style="width:100px;"> < ...
- css3种不知道宽高的情况下水平垂直居中的方法
第一种:display:table-cell 组合使用display:table-cell和vertical-align.text-align,使父元素内的所有行内元素水平垂直居中(内部div设置di ...
- Android手机在不同分辨率情况下字体自适应大小
两种解决方法: 一. 1.首先根据不同分辨率获取不同字体大小. 在RES里创建values-480x320/strings.xml 里面设置<dimen name="Text_size ...
- Cygwin 各种情况下中文乱码--终极解决方案
0.引言 本人从进公司以来一直负责公司Android平台下产品的NDK开发,用的工具: 01. Google的adt-bundle(集成了eclipse和sdk) 02. NDK 03. Cygwin ...
- 关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法
关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法 题设: 经常使用FusionCharts图表的朋友可能会遇到这个问题.就是在FusionCharts显示的时候有时候 ...
随机推荐
- R语言高性能编程(三)
一.使用并行计算加倍提升性能1.数据并行 VS 任务并行实现数据并行的算法scoket 并行性注意并行计算时间并不与执行任务的计算资源数目成正比(计算机核心),amdahl定律:并行代码的速度受限于串 ...
- python基础(二)-------数据类型
python开发基础篇(二)数据类型 python数据类型有: 1.数字 1.只能存放一个值 2.一经定义,不可更改 3.直接访问 主要的分类为:整型,长整型,(python2有长整型的概念Pytho ...
- 前端面试题系列(1):doctype作用 标准模式与兼容模式
1.doctype作用 <!DOCTYPE>声明位于HTML文档的第一行.处于<HTML>标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCYTYPE不存在或格式不 ...
- maven学习之二
三 profile介绍 可以有多个地方定义profile.定义的地方不同,它的作用范围也不同. (1) 针对于特定项目的profile配置我们可以定义在该项目的pom.xml中. (2) ...
- Javascript日期类型的妙用
http://heeroluo.net/Article/Detail/110 获取某个月份的天数 相信大家读小学的时候就知道一年十二个月各有多少天了,这里面有个特殊的存在——2月.闰年的2月有29天, ...
- 两种数据传输的方式——get和post。
Form提供了两种数据传输的方式——get和post.虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响.虽然为了方便的得到变量值,Web容器已经屏蔽了二者的一 ...
- 魔方NewLife.Cube升级v2.0
魔方是一套集成权限管理的MVC管理后台,最具特色功能是模版覆盖机制,是XCode实体类的最佳搭档! v2.0.2017.1126 借助Ajax支持高级操作,如:删除选中.批量启用禁用等 用户管理增 ...
- C语言之浮点数
#include<stdio.h> int main(){printf("请分别输入身高的英尺和英寸," "如输入\"5 7\"表示5英尺 ...
- 【正则表达式】--python(表示字符)
[前修知识] match :匹配 span:范围 match 是从头往后开始匹配,search不按照顺序,直接获取自己想要的,有就显示,没有就None r 代表反转义,前面也提到过这个知识,如果 ...
- Android 异步消息处理机制终结篇 :深入理解 Looper、Handler、Message、MessageQueue四者关系
版权声明:本文出自汪磊的博客,转载请务必注明出处. 一.概述 我们知道更新UI操作我们需要在UI线程中操作,如果在子线程中更新UI会发生异常可能导致崩溃,但是在UI线程中进行耗时操作又会导致ANR,这 ...