- 浏览: 35774 次
- 性别:
- 来自: 深圳
最新评论
我相信所有的前端菜鸟在刚开始工作的时候都会和我一样,收到实现居中的需求。
网上的CSS居中帖子不胜枚举,但大多都没有很好的总结(或者有好的但是我没运气碰到)
今天就自己写一个吧,也算是对之前工作的总结。
一、水平居中
1.将元素水平居中
div.h_align{ border: 1px solid black; /*key code:*/ margin-left: auto; margin-right: auto; width: 300px;/*必须指定宽度*/ }
html code:
<div class="h_align">我是div!come on 求水平居中!</div>
summary:
(1)以上方法在无文档类型或文档类型是HTML4时,对IE无效,因为此时IE将此文档解析为HTML而不是XHTML或HTML5
(2)使用上述方法水平居中,必须指定宽度
2.将元素水平居中(use absolute position & width)
css code:
section{ border: 1px solid red; /*key code:*/ position: absolute; left: 50%; width: 300px; margin-left: -150px; }
html code:
<section>我是section!同求水平居中!</section>
summary:
(1)这个方法的思想是,利用绝对定位 left 50%以后,使负外边距的值为元素宽度的一半,从而实现居中(这个思路也可以用在垂直居中上)
二、垂直居中
1.单行文本垂直居中
css code:
p.single_line{ border: 1px solid green; /*key code:*/ height: 4em; line-height: 4em; overflow: hidden; }
html code:
<p class="single_line">我是单行文本!我有100px高,我要垂直居中!</p>
summary:
(1)key:令行距和元素高度相同,这样就限定了容器内只能容纳一行文本内容,于是文本就居中了
(2)设定height和line-height时,推荐使用相对单位em,这样能够在字体非常大的时候,依然保持居中
(3)overflow:hidden是必须的,理由同上,也是为了保持居中
(4)优点:块元素和行内元素均适用此方法,并且在主流浏览器中适用
(5)缺点:文本长度有限(最多只能一行),且对于非文本的元素无效
2.无固定高度的多行文本垂直居中
css code:
p.multi_line{ border: 1px solid gray; width: 100px; /*key code:*/ padding-top: 30px; padding-bottom: 30px; }
html code:
<p class="multi_line">我是多行文本!我宽100px但是没有固定高度!跪求垂直居中!</p>
summary:
(1)key:令上内边距和下内边距相等。值是多少无所谓,相等即可,使用上下外边距相等也可
(2)优点:块元素和行内元素均适用此方法,非文本元素也可以使用,并且在主流浏览器中适用
(3)缺点:无法设置高度
3.将固定高度的容器模拟表格布局实现垂直居中
css code:
div.wrap1{ border: 1px solid black; /*key code:*/ display:table; height:300px; } div.wrap2{ /*key code:*/ display:table-row; } div.wrap3{ /*key code:*/ display:table-cell; vertical-align:middle; } div.maincontent{ width:350px; background-color:black; color: white; /*key code:*/ height:90px;/* less than wrap1.height */ }
html code:
<div class="wrap1"> <div class="wrap2"> <div class="wrap3"> <div class="maincontent">我老爸高300px,我自己是350 X 90 px,我也可以居中啦哇哈哈,可是别在IE6/7下看我噢</div> <!-- other content --> </div> </div> </div>
summary:
(1)key:使用display属性中的table、table-row、table-cell来将元素模拟成表格布局。处于wrap3中的所有元素都会垂直居中,但是它们的高度总和不能超过wrap1的高度
(2)使用display:table-cell的时候必须同时在祖先元素使用display:table
(3)缺点:不能在IE6/7下实现
4.IE7及以下的解决办法
css code:
div.IE7wrap1{ border: 1px solid pink; /*key code:*/ height: 300px; position: relative; } div.IE7wrap2{ /*key code:*/ position: absolute; top: 50%; left: 0; } div.IE7maincontent{ width:350px; background-color:black; color: white; height: 90px; /*key code:*/ position: relative; top:-50%; left: 0; }
html code:
<div class="IE7wrap1"> <div class="IE7wrap2"> <div class="IE7maincontent">嘿哥们,我是IE6/7的解决方案,要看我就要用IE6/7,不然我丑爆了</div> </div> </div>
summary:
(1)算是一个css hack,服务于IE6/7
三、总结
工作时积累下来的经验,以及摘抄网上的资料,总结成这一篇博文,如果对您有帮助,请您推荐。
共勉。
发表评论
-
hibernate在eclipse的逆向工程生成hbm.xml和bean类
2014-09-24 10:56 544以前一直用myelipse,在myeclipse做hiber ... -
Jackson 框架,轻易转换JSON
2014-06-19 16:22 395Jackson可以轻松的将Java对象转换成json对象和x ... -
Gson简要使用笔记
2014-03-17 11:57 462使用Gson进行解析:下载google-gson-2.2.2 ... -
org.apache.commons.net.ftp包开发FTP客户端,实现断点续传,中文支持
2014-01-06 20:36 377利用org.apache.commons.net.ftp包 ... -
Apache FtpServer与Spring整
2014-01-01 22:50 741首先在application.xml(spring配置文件 ... -
Struts2+Jquery实现ajax并返回json类型数据
2013-09-15 10:27 288摘要: 主要实现步骤如下: 1、JSP页面使用脚本代码执行 ... -
JSON
2013-06-19 10:40 454JSON是一种基于文本的数据交换方式,或者叫做数据描述格式, ... -
JSP页面显示天气
2013-06-18 11:39 583显示深圳当天天气: <iframe width=& ... -
jsp的九大内置对象和四大作用域
2013-06-15 17:55 285定义:可以不加声明就在JSP页面脚本(Java程序片和Ja ... -
js功能杂技
2013-06-15 17:37 448一、日期写法: Html代码 < ... -
js中window的属性
2013-06-15 17:35 300Window的属性 属性描述 closed 获取引 ... -
web弹出窗口大全
2013-06-15 17:34 423一、Javascript弹出子窗口:可以通过多种方式实现,下面 ... -
用window.open()打开子页面传值问题
2013-06-15 17:33 6971、通过window对象的open()方法,open()方法 ... -
kaptcha生成图形验证码实现方法
2013-06-14 09:15 8411、下载kaptcha。 http://cod ... -
tomcate配置
2013-06-13 09:56 648Tomcat 是一款优秀的JSP/Servlet容器,最初 ... -
SVN
2013-06-13 09:35 6721.下载subclipse1.6的site包 2.把这个 ... -
log4j 应用
2013-06-13 09:33 548LOG4J的配置之简单使它遍及于越来越多的应用中了:Log ... -
maven配置
2013-06-13 09:29 576一、maven环境变量配置 变量名:M2_ ... -
myEclipse配置
2013-06-13 09:28 589一、myeclipse不能自动提示解决不能自动提示解决设置 ...
相关推荐
提供了div在div中居中的多种方式,直接打开文件F12查看样式即可,简单方便。不再只会使用绝对布局
效果描述: 首先还是那句老话,非常幸运我们现在可以使用CSS3布局。 在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position属性、float属性... 给你需要居中的div的父辈div增加附件中关键样式即可
DIV+CSS 图片垂直居中效果
在DIV中图片垂直/水平居中(最简单方法)
在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position属性、float属性,这种方式比较传统,对于那些特殊布局来说非常不方便,比如,垂直居中就不容易实现。 尤其是现在移动设备如此多的今天,需要...
11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的分析 第12章 CSS+div美化与布局实战 12.1 框架搭建 ...
以下代码实现一个大的div id=content包含两个左右结构的div,id=side和id= main 并居中放置。并对每个div设计了css样式。 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”...
非常实用的页面制作,用于设置div的透明度,以及div在页面左右居中
div最小高度去除办法:IE6中,使用CSS定义DIV的高度的时候经常遇到这个问题,就是当DIV的最小高度小于一定的值以后,就会发现,无论你怎么设置最小高度,Div的高度会固定在一个值不再发生变动,这个问题很是烦人。...
div居中的使用还是比较广泛的,在本文有个不错的示例,可以帮助大家更好的理解div居中显示,感兴趣的朋友不要错过
这个可谓是css的高级写法 兼容IE8/IE9/IE10/IE11 火狐,谷歌,360等各种主流浏览器 ... 相对于body居中的另外一种写法 ... 原理比较难以理解,... 2、分别给两个div加上样式属性即可,详细请见附件index.html文件
CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和...
它可以判断外部div以及内部div的宽度高度,从而实现上下左右居中的目的,兼容主要浏览器 使用方法简单: 1、确保head中引入jquery库以及本例的css样式 2、将代码部分拷贝到你需要的地方 3、在代码...
11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的分析 第12章 CSS+div美化与布局实战 12.1 框架...
比如: <div> <div> </div> </div> 想让子div在父div中水平居中对齐,如果在css中写 div { text-align: center; }的话在ie中浏览没有问题,但在firefox中依然左对齐。 所以必须再加一个样式 div div { margin-left:...
主要的样式定义如下,这也是最简单的方法: body {TEXT-ALIGN: center;... ” 需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的
本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果。分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery [removed][removed] 2.在页面的head中加入浮动层和遮罩层的样式 <style> #...
主要介绍了在不定宽高的情况下,div内图片如何垂直居中,css样式如何书写?示例代码如下