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显示的时候有时候 ...
随机推荐
- 第2篇 C#数据类型-值类型与引用类型
一 C#内存分配 在应用程序与操作系统之间有一个"中间人"--公共语言运行时(Common Language Runtime,CLR).它为应用程序提供内`存管理,线程管理和远程处 ...
- SQL Server 基本操作之三种增加法
前言: 数据库操作避免不了对数据的操作,操作方法大同小异,万变不离其宗,今就写一下各种花式操作的根本增删改查四种操作,今天我们就来说一下增加操作的三种方法 正文: 增加操作是对数据库进行数据行的添加, ...
- PHP date()函数格式与用法汇总
在页面的最前页加上 date_default_timezone_set("PRC"); /*把时间调到北京时间,php5默认为格林威治标准时间*/ date () a: & ...
- 实际应用中遇到TimedRotatingFileHandler不滚动的问题
需求: 程序每天晚上8点和10点定时运行,期望日志按日期记录 添加Handler部分代码如下: formatter = logging.Formatter("%(asctime)s %(fi ...
- 解释器模式(Interpreter)
解释器模式(Interpreter)解释器模式是我们暂时的最后一讲,一般主要应用在OOP开发中的编译器的开发中,所以适用面比较窄. Context类是一个上下文环境类,Plus和Minus分别是用来计 ...
- Webpack飞行手册
前言 在学习 Webpack 之前,我们需要了解一个概念:模块. 何为模块? 如果你曾学过 Java , C# 之类的语言,一定会知道 Java 中的 import 或 C# 中的 using 吧? ...
- 洛谷最短路计数SPFA
题目描述 给出一个N个顶点M条边的无向无权图,顶点编号为1-N.问从顶点1开始,到其他每个点的最短路有几条. 输入输出格式 输入格式: 输入第一行包含2个正整数N,M,为图的顶点数与边数. 接下来M行 ...
- TeamTalk安装测试
TeamTalk介绍 项目框架 TeamTalk是蘑菇街的开源项目,github维护的最后时间是2015但是仍然是一款值得学习的好项目,麻雀虽小五脏俱全,本项目涉及到多个平台.多种语言,简单关系如下图 ...
- linux 安装 cenos7 和 jdk
安装一个虚拟机安装cenos7 版本的 安装完虚拟机后必备工具 第一步. 配置网路 设置桥接网路设置静态网络参考 下面博文 http://www.cnblogs.com/Jerry1104/p/758 ...
- UWP 共享文件——接收者
UWP上共享,分为接收者(别人共享数据给你,你接收了,然后在做你的处理)和发送者(你给别人发送数据,就像你的App支持图片共享到微信好友或者朋友圈那样,虽然UWP上的微信并不支持这样子) 很简单(参考 ...