- 浏览: 1466287 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
以前这个问题也一直出现过,因为不是什么大问题,就用table随便搞搞
html ,body {height:100%} <table height='100%' align="center" valign="center"> <tr> <td><div id='content'></div></td> </tr> </table>
注意 : html ,body {height:100%} 一定要写 ,使得 table 的参考对象 height 得到窗体的高度,这样 table 中td 的内容才能在窗体范围内居中。
详见: html body 100% 解析和应用
现在越来越注意css 了,想用css实现一下,自己一试,还真难,汗,ff行了,ie就不行 ,一找,原来真的挺难 :垂直居中问题解释整理
以下为转载
1. 单行文字在固定高度容器中垂直居中
这个最简单,只要让行间距 line-height 与容器高度 height 相等即可;
#box { height: 120px; line-height: 120px; overflow: hidden }
2. 多行文字在未知高度容器中垂直居中
这个也很简单,将 padding-top 与 padding-bottom 设置成相同的值即可;
#box2 { padding: 10px 0 }
3. 多行文字在固定高度容器中垂直居中(非 IE
浏览器)
#box3_wrapper { display: table; height: 311px; background: #eee } #box3 { display: table-cell; vertical-align: middle }
<div id="box3_wrapper"> <div id="box3"> 作者:shimano<br /> 如何既给用户提供最大限度的编辑权限<br /> 又能保证网页整体的规范和美观?<br /> 真 TMD 难啊! <div> </div>
注意:这其中有个关于字号的问题,在 XP 和 Vista 及 Mac
下即使设定了像素为单位的字号,文字大小也依旧不同,这个在我之前一个篇日志里也提到过,在 XP 下,12px 宋体是 11x11(px)的,在
Vista 下有些文字高 11px 有些高 12px,这也是为什么 Vista 下的宋体看起来比较奇怪,Mac
下默认就是平滑边缘的黑体,再有就是 safari 下平滑边缘的宋体,所以更不容易辨别。
如果细究,在不设定高度和行间距的容器中,12px 宋体文字上下边沿依旧会有 1px 到 2px 的间距,XP 的 IE6 下,字下沿有
3px ,字上沿为 0;Firefox 下,字上沿为 1px,下沿为2px;Vista 下,文字上下各 1px
间距(考虑同等高度文字);这可以理解为默认 line-height,在 这篇日志
中我也是遇到了同样的问题。
关于 IE6 下 line-height 的问题我在 这篇日志
中有提。
4. 多行文字在固定高度容器中垂直居中(IE
浏览器)
因为 IE
不支持将 div 显示为 table 及其同胞,所以我们要另想办法:
#box3_wrapper { position: relative; } #box3_inner { position: absolute; top: 50% } #box3 { position: relative; top: -50%; background: #eee }
<div id="box3_wrapper"> <div id="box3_inner"> <div id="box3"> 这种方法<br /> 在下面的未知高度 div 垂直居中<br /> 也用到了 </div> </div> </div>
下面有个权衡 IE
与 非 IE
浏览器浏览效果的实现方法,请继续看
5. 未知高度 div 的垂直居中
#box4_wrapper { height: 100%; width: 100%; overflow: hidden; position: relative } #box4_wrapper[id] { display: table; position: static } #box4_outer { position: absolute; top: 50% } #box4_outer[id] { display: table-cell; vertical-align: middle; position: static } #box4_inner { position: relative; top: -50%; margin: 0 auto; background: #eee }
<div id="box4_wrapper"> <div id="box4_outer"> <div id="box4_inner"> 这是一种无 hack 的方式<br /> 虽然环保,但是臃肿:( </div> </div> </div>
CSS2 选择符 #value[id] 相当于 #value,但是 IE
不支持这种类型的选择符,使用这种方式区分浏览器避免 hack:)
6. 未知尺寸图片(小与容器高度)在固定高度容器中垂直居中
#box5 { display: table-cell; *display: block; *font-size: 175px; *font-family: Arial; vertical-align: middle; height: 200px; width: 200px } #box5 img { vertical-align: middle }
<div id="box5"> <img src="img/ctba.png" alt="扯谈社" /> </div>
方法2: 找一张图片 1*1 ,高度设为 div 的高度 ,待居中图片紧随其后 , 这样的话 由于行内元素 基于 中线对其 ,则待居中图片 垂直居中了 ,至于水平居中则用 div {text-align:center}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Vertical Middle</title> <style> .itm{border:2px solid #ccc;width:160px;height:160px;text-align:center;} .blank{width:0;height:160px;} .itm img{vertical-align:middle;} </style> </head> <body> <div class="itm"> <img src="blank.gif" class="blank" /> <a href=""><img src="m060616.jpg"/></a> </div> </body> </html>
淘宝 UED 07 前端开发原题。解释下针对 IE
的 hack:在 IE
下,将字号设置为容器高度的 0.873(本例中即 200*0.873 = 175)图片便会垂直居中;字体设置为 Arial 主要防止非 utf-8 引起的 hack 失效问题,如 gbk 编码(摘自译飞的博客)
当然如果只是图片,在针对非 IE
浏览器时利用单行文字的垂直居中方法也可以。
- vertical测试.rar (5.8 KB)
- 下载次数: 23
发表评论
-
cubic-bezier 模拟实现
2013-01-05 16:34 14112cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
css reset revisit
2012-07-25 00:32 4264正如 javascript 兼容库的作用, css r ... -
兼容 ie 的 transform
2012-02-23 14:00 6446css 2d transform 是 css3 引入的一个新的 ... -
write html parser
2011-12-01 02:48 2928首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2856简介 如果你经 ... -
fixed 定位 auto 问题
2010-12-02 11:58 2115当一个元素被 fixed 定位 ... -
css的优先级与继承
2010-11-08 12:30 3718起因: 很早就听 ... -
浏览器渲染
2010-10-12 21:07 0http://snook.ca/archives/html_a ... -
背景图样式回顾
2010-09-30 13:51 1796正式点叫 background-image recap ,最近 ... -
mhtml datauri 与 css expression
2010-09-29 18:17 2399mhtml ,datauri ,css expressio ... -
margin合并整理
2010-06-23 11:25 4201多个段落为了美观,浏览器会将它们的垂直距离变得统一,这是一种很 ... -
编写跨浏览器兼容的 CSS 代码的金科玉律
2010-06-09 13:26 0作为 Web 设计师,你的 ... -
图片优化 and dataURI and mhtml for ie<8
2010-04-28 10:00 0http://www.phpied.com/data-uris ... -
W3C XML Schema 与文档类型定义 (DTD) 比较
2010-02-01 23:50 0http://www.ibm.com/developerwor ... -
xtml与html
2010-02-01 23:26 0HTML与XHTML 二者有什么区别,你觉得 ... -
获取css属性计算值问题
2010-01-29 23:11 3809都知道标准浏览器可以用 getComputedStyle 以及 ... -
垂直居中问题解释整理
2009-12-06 01:19 2299垂直居中曾经很热的话题,也转过网络一些好的解决方案: ... -
有趣的z-index
2009-12-01 00:25 2851实践 : 注:firefox 示例1 ... -
css列布局整理
2009-11-27 01:14 1704对一些经典的布局进行整理,以及修改去除不必要的hack,兼容 ... -
ebay ppt.rar
2009-11-18 15:23 0ebay ppt.rar
相关推荐
这样,图片将在其容器内水平和垂直居中。 另外,如果您的项目需要支持较旧的浏览器,可以使用CSS的绝对定位方法。这种方法需要设置容器为相对定位(`position: relative`),然后将图片设置为绝对定位,并将其`top`...
使用`position: absolute`配合`top: 50%`和`transform: translateY(-50%)`可以让元素相对于其父容器垂直居中。这种方法需要父容器设置`position: relative`以定义一个定位上下文。 4. **绝对定位的跨浏览器兼容性...
在网页设计中,"垂直居中显示"是一个常见的需求,特别是在多设备、多屏幕尺寸的环境下,确保元素在页面上...学习并熟练掌握这些技巧,将有助于你在实际开发中更好地处理垂直居中问题,提升网页设计的质量和用户体验。
在压缩包中的“TextBlockVerticalAlignment”文件可能包含了具体的源代码示例,可能使用了上述方法之一,或者通过自定义布局容器(如ViewBox)或者使用Grid和RowDefinitions来实现垂直居中效果。这些方法通常会涉及...
但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知高度的容器中的元素,垂直居中就变得有些复杂了。本文将详细介绍一种有效的解决方案,该方法不仅适用于标准浏览器,同时也提供了一种兼容非标准浏览器...
可以使用表格元素来实现垂直居中,例如、、等元素,使用 vertical-align 属性可以实现垂直居中。 代码示例: ``` 文字内容 ``` 这种方法适用于表格元素,但不适用于其他元素。 4. 使用 Flexbox 实现垂直...
通过设置`height`和`line-height`为相同的值,可以使得DIV内的文本或单行内容在容器内垂直居中。例如: ```css div { height: 25px; line-height: 25px; overflow: hidden; } ``` 然而,这种方法的局限性在于它...
图片作为子元素,将自然地在其容器内垂直居中。 2. **Grid布局** CSS Grid布局允许更复杂的二维布局。要使图片居中,可以设置网格容器的`align-items`和`justify-items`属性都为`center`: ```css .container ...
在某些设计中,为了提升用户体验,我们希望TextBox能被垂直居中显示在容器内,如Panel。 首先,让我们了解什么是Panel。Panel是.NET Framework中System.Windows.Forms命名空间下的一种控件,它作为一个容器,可以...
Flexbox是CSS3引入的一种新的布局模式,特别适合处理容器内元素的对齐问题。要使图片在容器中垂直居中,可以设置容器的`display`属性为`flex`,然后使用`align-items: center;`来实现垂直居中。例如: ```css ....
在IE8+支持CSS的多种方法,使得开发者能够灵活地处理不同场景下的垂直居中问题。下面我们将详细探讨几种主要的垂直居中技术及其应用。 1. **表格布局(Table-Cell Display)** 使用CSS的`display`属性设置为`table...
在网页设计中,让多行文字在容器内垂直居中是一项常见的需求,尤其在响应式设计和各种屏幕尺寸下保持良好的用户体验更为重要。本话题主要探讨如何使用div和CSS技术来实现多行文本的垂直居中,并且使高度能够自适应...
"jQuery实现上下左右垂直居中.zip" 提供的是一个名为 "jquery.valign" 的插件,它专用于解决HTML元素(如图片、文字)在div容器内部的垂直对齐问题。下面将详细介绍这个插件的工作原理以及如何使用。 `jQuery....
对于固定高度的多行文本,利用CSS的`display`属性来模拟表格特性,可以使`<div>`元素像`<table>`一样工作,从而实现垂直居中。具体步骤如下: 1. 将`<div>`的`display`属性设置为`table-cell`,因为`table-cell`...
在网页设计中,让图片或其他元素垂直居中是一项常见的需求,尤其在响应式设计和现代网页布局中尤为重要。本文将详细介绍如何实现网页图片的垂直居中,并提供多种方法供参考。 1. **CSS Flexbox** Flexbox是CSS3中的...
在处理行内块元素(inline-block elements)时,我们可能会遇到一个常见的问题:无法通过设置行高(line-height)来实现元素的垂直居中对齐。本篇文章将深入探讨这个问题,并提供解决方案。 行内块元素是一种特殊的...
标题中的“懒人原生块级区域内元素上下左右垂直居中方法”指的是在网页设计中,如何不借助复杂的CSS框架或者JavaScript库,而是利用HTML和CSS的原生特性,实现块级元素在容器中水平和垂直居中的技术。这种方法特别...
本文将详细探讨如何实现图片在div层的居中,并着重解决垂直居中这一相对复杂的任务,同时考虑浏览器的兼容性问题。 首先,让我们了解基本的CSS布局属性,它们对于实现图片居中至关重要。`margin: auto` 是一种简单...
在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`<div>`元素是一...