在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS
Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生
效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起
作用。
相关教程:div水平居中的N种方法
一、单行垂直居中
如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
如:
这段代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。更多CSS教
程。
二、多行未知高度文字的垂直居中
如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的
padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下
面的代码:
div {
padding:25px;
}
这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。
三、多行文本固定高度的居中
在本文的一开始,我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display
属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和
display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:
这个方法应该是很理想了,但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell,因此这种方法在
Internet Explorer 6及以下的版本中是无效的。嗯,这让人很郁闷!不过我们还其它的办法
四、在Internet Explorer中的解决方案
在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素
进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的
高度,而从父元素继承来的定位高度)。例如,我们有下面这样一个(X)HTML代码段:
<div id="wrap">
<div id="subwrap">
<div id="content">
</div>
</div>
</div>
如果我们对subwrap进行了绝对定位,那么content也会继承了这个这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进
行相对定位的时候,你使用的100%分比将不再是content原有的高度。例如,我们设定了subwrap的position为40%,我们如果想使content的上
边缘和wrap重合的话就必须设置top:-80%;那么,如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去
,但是如果我们把content也设置50%呢?那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中:
当然,这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。(不过我不解,我查阅了很多文章,不知道是因为出
处相同还是什么原因,似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理,我也只是了解了一点皮毛,还要再研究)
五、完美的解决方案
那么我们综合上面两种方法就可以得到一个完美的解决方案,不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器,你可
以参考这篇“简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera”:
至此,一个完美的居中方案就产生了。
p.s. 垂直居中vertical-align的值是middle,而水平居中align的值是center,虽然同是居中但关键字不同
分享到:
相关推荐
DIV+CSS 图片垂直居中效果
12.5 自动选择CSS样式 第3部分 CSS混合应用技术篇 第13章 CSS与JavaScript的综合应用 13.1 JavaScript概述 13.2 JavaScript语法基础 13.3 实例一:输入时高亮显示的Excel表格 13.4 实例二...
首先还是那句老话,非常幸运我们现在可以使用CSS3布局。 在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position属性、float属性,这种方式比较传统,对于那些特殊布局来说非常不方便,比如,垂直...
通过简单的Css样式就可以实现 复制代码代码如下: <div xss=removed> <input class=”submit” id=”btn” type=”submit” value=”注册” /> </div> 使用margin-left:auto;margin-right:auto; 可以让你的...
并对每个div设计了css样式。 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”...
12.5 自动选择CSS样式 第3部分 CSS混合应用技术篇 第13章 CSS与JavaScript的综合应用 13.1 JavaScript概述 13.2 JavaScript语法基础 13.3 实例一:输入时高亮显示的Excel表格 13.4 ...
利用css样式实现表格中字体垂直居中的方法,具体代码如下所示: 有一个自定义表格如下所示,当所返回数据改变时,文字都能自动居中 //html //用两个div做容器 <div class=subject1>{{item.subject1}} /...
让按钮居中显示的方法有很多,下面为大家介绍下使用CSS来快速实现下,具体实现代码如下,希望对大家有所帮助
复制代码代码如下: <style type=”text/css”>...} /* 让内容垂直居中的控制样式在下面这一行 */ #PageMain{width:1002px; height:602px; background-color:#0E4980; margin:0 auto; position:absolute;
此为《高效学习CSS布局之道——通过244个范例掌握网页样式与布局技术》一书的配套光盘,读者可自由取其示例文件做学习、研究之用。 CSS控制元素的大小; CSS控制元素的定位; CSS控制元素的布局; CSS...
图片按比例缩放 js图片按比例缩放大小,无需CSS样式
,就可以轻松解决掉水平居中的问题,但一直以来最麻烦对齐问题,都是“垂直居中”这个讨人厌的设定,以下将介绍七种单纯利用CSS垂直居中的方式。 七种垂直居中的方法 设定行高(line-height) 添加伪元素 calc...
CSS 将button按钮垂直+水平居中 参考文章:CSS实现垂直居中的5种方法 具体效果如图: 这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度...
css样式表中文手册.chm DIV 居中的绝好解决方法.txt DIV+CSS制作专业信息网站的制作规范 .txt DIVCSS布局大全.pdf dom10.chm web标准化设计:常用的CSS命名规范.mht 学习网页技术CSS样式表整理的20个技巧.txt...
12.5 自动选择CSS样式 第3部分 CSS混合应用技术篇 第13章 CSS与JavaScript的综合应用 13.1 JavaScript概述 13.2 JavaScript语法基础 13.3 实例一:输入时高亮显示的Excel表格 13.4 实例二...
12.5 自动选择CSS样式 第3部分 CSS混合应用技术篇 第13章 CSS与JavaScript的综合应用 13.1 JavaScript概述 13.1.1 JavaScript简介 13.1.2 JavaScript的特点 13.1.3 JavaScript与CSS 13.2 ...
3.2.2 CSS 样式表书写顺序 3.3 怎样更好地应用CSS 3.3.1 块元素和内联元素 3.3.2 一些CSS 的实用技巧 3.3.3 怎样调试CSS 3.4 关于CSS 的学习 第4 章 网页头部元素的详细定义 第41 页 4.1 DOCTYPE 的选择 4.1.1 什么...
通过html语言自定义的css样式文件,能够在markdownpad2中简洁地显示文档文件或markdown笔记,可以参考居中,行距,缩进等格式的设置。
主要介绍了在不定宽高的情况下,div内图片如何垂直居中,css样式如何书写?示例代码如下