- 浏览: 1311530 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (732)
- Java_about (146)
- Spring_Hibernate_Struts_OpenSource (27)
- linux_unix (62)
- life_sth (22)
- js_css_html_xml_nodejs (69)
- design_pattens (1)
- Perl (8)
- php_ecshop (4)
- DB_Mysql_Oracle_Informix_SqlServer (43)
- JSTL (8)
- Testing_自动化测试 (42)
- DB_ID_UUID (4)
- SEM_SEO (1)
- english_study_improvement (4)
- SVN_Git (9)
- WebService_SOA_CloudComputing (3)
- E-Commerce (1)
- Lucene_Solr (7)
- others (2)
- Regex (2)
- tomcat_jetty (8)
- zeroc-ice (1)
- java_excel (5)
- ant_maven_gradle (5)
- Unity_VR_AR_C# (2)
- jmeter (1)
- XPath_dom4j (1)
- Ruby_and_Rails (68)
- write_a_rails (17)
- manage_and_team (1)
- getting_real (1)
- ubuntu (20)
- git_and_git_flow (7)
- TODO (1)
- PM_design (2)
- Python_and_Django (8)
- NoSql_mongo_redis (24)
- C/C++ (3)
- vi_vim_gvim (0)
- c#_.Net_windows编程_dll (10)
- Php_and_Yii (9)
- Android_IOS (31)
- Mysql (5)
- sa_运维_network_硬件 (37)
- lua (2)
- c_cpp_VisualStudio (21)
- 硬件-RM-Arduino (6)
最新评论
-
shenkun58:
...
NoClassDefFoundError: Could not initialize springframework.BeanCreationException -
liaojia1:
正解,感谢
NoClassDefFoundError: Could not initialize springframework.BeanCreationException -
flingfox63:
谢谢分享,电脑上有IPV6,导致了Guard启动不了……
ruby错误解决: Address family not supported by protocol - connect(2) -
c39274936:
s = "hello_world_ruby" ...
驼峰格式和下划线格式转换_translation between camel and snake format -
yfj300:
学习了学习了学习了学习了
硬盘基本知识(磁道、扇区、柱面、磁头数、簇、MBR、DBR)
转载地址:http://www.blueidea.com/tech/web/2006/3231.asp
特此感谢作者无私奉献!!
之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中 ,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和 table 布局一样。不过最近有人问了几个例子,看来对此的需求还不少。现在就把我经验拿出来分享一下,希望大家鼓鼓掌。
首先,要有一个概念:凡是 table 布局可以实现的,CSS 一定可以实现 。CSS 可以实现的,table 未必能做到。
现在来几个例子:
一、单行内容的居中
只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height
和 height
,并使两值相等,再加上 over-flow: hidden
就可以了
.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}
优点:
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点:
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是:
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话,overflow: hidden 一定要
为什么?
请比较以下两个例子:
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
上一个高度是用的绝对单位px,并且没有隐藏溢出,下一个高度用的单位是相对单位em,并且隐藏了溢出。如果你的浏览器支持放大字体,那么尽情地放大字体,看看会出现什么效果。
二、多行内容居中
,且容器高度可变
也很简单,给出一致的 padding-bottom 和 padding-top 就行
.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}
优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点:
容器不能固定高度
三、把容器当作表格单元
CSS
提供一系列diplay属性值,包括 display: table, display: table-row, display:
table-cell 等,能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的
valign="center" 一样了。
.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}
可惜IE不支持这些属性,不过在其他浏览器上显示效果非常完美。
要注意的是:和一个合法的<td>元素必须在<table>里一样,display: table-cell 元素必须作为 display: table 的元素的子孙出现。
优点:
不用说了吧,就是表格,效果和表格一模一样
缺点:
IE下无效
四、以毒攻毒!用 IE 的 bug 解决 IE 中的绝对居中
先不得不说一句,IE 真的是个很烂的浏览器,CSS1中的定义都不支持,害得要我们转个大圈子来造居中
。不过就像我说的,凡是 table 布局可以实现的,CSS
一定可以实现
,即使在 IE 里也不例外。我研究 IE layout 模式多年,还是找出了一个可以在 IE 中绝对居中
的方法。这个方法就是基于 IE layout 的 bug,也可以算以毒攻毒。至于原理,不要问我,这是独门秘学,何况三言两语也讲不清楚,只要好用就行
.middle-demo-4{
height: 300px;
position: relative;
}
.middle-demo-4 div{
position: absolute;
top: 50%;
left: 0;
}
.middle-demo-4 div div{
position: relative;
top: -50%;
left: 0;
}
五、整合三和四,写出支持所有浏览器的垂直居中
容器!
思路是利用 IE 和 非IE 浏览器的 CSS
hack, 整合三和四的CSS
,写出兼容主流浏览器的垂直居中
容器。具体代码就不给出了,大家权当作练习练习。例子可以在下面的附录中找到。
最终实测支持的浏览器:IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下需要加上对合适模型的补正。
推测支持的浏览器:Mozilla 1.5+, Netscape Navigator 7+, Opera 7+
未测试浏览器:Konqueror
最后附上自己写的,所有居中 布局的范例网页,大家不明白可以参考。
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
发表评论
-
浏览器辅助神器:油猴脚本使用教程
2023-08-06 16:54 346= 最近一个功能,使用其他脚本总是运行出问题。 不得已使 ... -
js控制鼠标滚轮的方法_javascript控制鼠标滚轮的方法_jquery控制鼠标滚轮的方法
2022-06-10 17:20 415= js没有模拟click这样的scroll函数。仅仅通 ... -
jquery判断元素是否隐藏是否可见的多种方法
2022-04-05 19:24 498= = = jquery判断元素是否隐藏的多种方法 ... -
js JavaScript 读取文件数据、导出文本到文件。console输出到本地文件
2021-03-11 19:41 1508= 需求:输出点内容到本地文件。 方法:下面。 大概 ... -
万能代码,一招破解网页禁止复制
2020-10-19 20:11 737= 使用评测: 发现使用之后,页面的正常的js不好用了 ... -
jQuery 选择同时包含两个class的元素的实现方法
2020-10-18 23:03 490= = = from:https://www.cnb ... -
5个JS模板引擎
2020-06-28 11:38 370= 实际来看: 1百度的好用,但比较老。 1腾讯的用 ... -
获取weixin文章列表的js
2019-05-09 18:55 465= 没来得及优化,将就用着。 暂存备用。 = // ... -
如何在console控制台导入jquery
2019-04-23 21:05 1113= = = /* 百度共用jquery包 htt ... -
Jquey_Selenium对不显示节点的处理不同_比如getText结果不同
2018-08-25 10:38 631= = = Jquery中,不显示节点(displa ... -
[知乎问题]如何衡量一个人的angularjs水平?
2017-07-20 15:22 874= = = [知乎问题]如何衡量一个人的angular ... -
HTTP头的Expires与Cache-control区别
2016-12-23 18:53 1111HTTP头的Expires与Cache-control区别 ... -
200 OK (from cache) 与 304 Not Modified
2016-12-13 18:12 995200 OK (from cache) 与 304 N ... -
gulp_如何保证任务和程序顺序执行?
2016-05-11 20:17 2012使用return来解决,是最好的方式。 return有很 ... -
nodejs之supervisor__supervisor的python版本
2016-05-07 10:07 1707【nodejs之supervisor】 如 ... -
nodejs_cnpm导致node的prefix和cache和node_global配置环境变量不起作用
2016-05-06 11:41 4816cnpm的介绍: http://npm.taoba ... -
Foundation和zepto
2016-04-29 15:07 824为什么我们放弃了 Z ... -
npm link 命令解析
2016-04-29 13:44 1539npm link 命令解析 fr ... -
nodejs npm常用命令
2016-04-28 15:05 676nodejs npm常用命令 np ... -
nodejs中的环境变量:NODE_PATH
2016-04-28 15:05 1759注:没有解决gulp本地文件依赖的问题。 == ...
相关推荐
"CSS实现完美垂直居中"这一主题深入探讨了如何利用CSS技术使元素在容器内实现精确的垂直对齐。以下是一些关于这个主题的关键知识点: 1. **单行文本垂直居中**: 对于单行文本,可以使用`line-height`属性来实现...
"CSS 实现垂直居中水平居中的几种方式" CSS 中实现垂直居中水平居中的几种方式是非常重要的,以下是几种常见的实现方式: 1. 容器内(Within Container) 在容器内实现垂直居中水平居中可以通过设置容器的 ...
在压缩包中的"垂直居中显示"文件可能包含了示例代码、CSS样式或者HTML结构,通过查看这些文件,你可以更深入地理解每种方法的实现细节。学习并熟练掌握这些技巧,将有助于你在实际开发中更好地处理垂直居中问题,...
"垂直居中布局 Vertical-aligned 应用测试:兼容IE6/8/FF"这个主题涉及到如何在各种浏览器环境下,包括Firefox和较旧的Internet Explorer版本,实现元素的完美垂直居中。 在CSS中,传统的垂直居中方法可能包括使用...
要实现一个DIV元素在网页中水平和垂直居中,可以使用不同的CSS方法。这些方法的兼容性决定了它们能够适用于哪些浏览器版本。在上述文件中,给出了几种不同的实现方式,其中一些兼容现代浏览器如Chrome,同时也兼容较...
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...
div做的界面时,又出现CSS hack(CSS兼容浏览器问题)在IE内核浏览器或者firefox浏览器中都能居中,没有居中的可以用其特殊标签来设定居中,如下划线 _ IE6优先识别,!important 仅火狐firefox浏览器识别。可是在...
总结来说,实现表单元素垂直居中的完美解决方案主要包括正确使用`vertical-align`属性、合理设置元素的`margin`、清除默认样式、添加交互提示以及利用快捷键增强可访问性。通过这些方法,可以显著提升表单的易用性和...
总结来说,当需要将DIV元素在网页中水平垂直居中时,可以根据实际情况选择使用基于负margin的方法或CSS3 transform方法。前者在兼容性上有优势,后者在自适应布局方面表现更为出色。在设计现代网页布局时,推荐使用...
本文将详细介绍一种基于CSS的垂直居中对齐方法,并结合Less预处理器来实现复用性更高的代码。 首先,核心的CSS代码如下: ```css .elment { position: relative; top: 50%; transform: translateY(-50%); } ```...
下图是理想中的效果图,外部容器的宽度和高度是固定的,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。 但是实际中实现的效果并不是很完美,由于各浏览器的解析都各不相同,所以各浏览器...
本文主要探讨的是如何使用CSS来实现`div`元素的水平和垂直居中。我们将通过两种不同的方法来详细讲解这一主题。 首先,我们来看一种简单的方法,即实现水平居中。通过设置`div`的`margin`属性,可以轻松地使其在父...
在这个示例中,`class="my"`的`<div>`通过以下CSS样式实现了垂直居中: ```css .my { width: 1000px; height: 200px; margin: 0 auto; background-color: #fff; text-align: center; display: table-cell; ...
此外,为了使图片在圆形区域内居中,我们可以利用CSS的`position`、`top`、`left`属性,或者更简洁地使用`margin: auto`来实现水平和垂直居中。 在实际应用中,我们可能会结合HTML结构,如创建一个包含图片的容器,...
### CSS完美兼容通用方法 #### 一、CSS Hack详解 CSS Hack是一种技术手段,用于解决不同浏览器对CSS解析差异导致的兼容性问题。通过特定的语法编写CSS样式,可以实现针对不同浏览器显示相同或相似的效果。 ##### ...
如果需要实现垂直居中,还需要采取额外的CSS技巧或布局方法,如使用Flexbox或Grid布局。 在使用这些方法的时候,也需要注意浏览器的兼容性问题,不同版本的浏览器可能对某些CSS属性的支持程度不同。一般而言,现代...
设置父容器`display: flex`,然后添加`align-items: center`来实现垂直居中。对于老版本浏览器,可以使用绝对定位或者CSS3的`transform`属性。 在jQuery.fullPage的场景下,由于涉及到全屏滚动,我们可能需要在每个...
### CSS完美兼容IE6_IE7_FF的通用方法 在网页设计与开发过程中,浏览器兼容性问题一直是前端开发者面临的重要挑战之一。特别是在早期的Web开发中,如何让网站同时兼容Internet Explorer 6(简称IE6)、Internet ...
为了实现固定宽度和高度的页面在不同分辨率的屏幕上垂直和水平居中显示,特别是需要兼容IE浏览器,通常需要采用特定的CSS技术。以下是实现该功能的知识点: 1. 使用绝对定位配合负边距实现居中: - 设置页面中需要...