Div水平居中比较简单直接align:center;就行了,或者通过padding属性来控制也行。那么垂直居中呢?也许有人会说CSS中不是有 vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格 元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的 元素是没有valign特性的,使用vertical-align对这些元素并不起作用。
1、单行垂直居中
如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如:
view plaincopy to clipboardprint? div { height:25px; line-height:25px; overflow:hidden; }
这段CSS代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。
不过很遗憾的告诉你,在IE6及以下版本中,这种方法是不支持对图片设置垂直居中的。
2、多行未知高度文字的垂直居中
如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值 相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下面的代码:
div { padding:25px; }
这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的哦。
3、多行文本固定高度的居中
在本文的一开始,我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一 个display属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使 用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者 必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:
div#wrap { height:400px; display:table; } div#content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; }
这个方法应该是很理想了,可是IE6以下的版本 并不能正确地理解display:table和display:table-cell,因此这种方法在IE6及以下的版本中是无效的。嗯,这让人很郁闷! 不过还是有解决办法的。在IE6及以下版本中,在高度的计算上存在着缺陷的。在IE6中对父元素进行定位后,如果再对子元素进行百分比计算时,计算的基础 似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的高度,而从父元素继承来的定位高度)。例如,我们有 下面这样一个(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%的时候它就正好垂直居中了。所以我们可以使用这中方法来实现IE6中的垂直居中代码如下:
div#wrap { border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; position:relative; } div#subwrap { position:absolute; border:1px solid #000; top:50%; } div#content { border:1px solid #000; position:relative; top:-50%; }
当然,这段代码只能在IE6等计算存在问题的浏览器中才会有作用。(不过我不解,我查阅了很多文章,不知道是因为出处相同还是什么原因,似乎很多人都不愿意去解释IE6中这这个Bug的原理,我也只是了解了一点点,还得继续深入研究)
5、垂直居中完美的解决方案
综合以上的方法我们可以得出一个比较完美的解决方案,只是要用到一些CSS hack的知识。
div#wrap { display:table; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; _position:relative; overflow:hidden; } div#subwrap { vertical-align:middle; display:table-cell; _position:absolute; _top:50%; } div#content { _position:relative; _top:-50%; }
至此,一个完美的居中方案就产生了。值得注意的是垂直居中vertical-align的值是middle,而水平居中align的值是center,虽然同是居中但关键字不同。
平时我们在做网页设计或网站模板输出时往往会遇见像内容或图片要垂直居中的问题,这些问题看起来似乎是很简单的。但要是没有正确的真正的了解这些知识在不同的浏览器下就很容易会问题哦!有人告诉我们有问题了,或许还不知道是怎么一回事。
本文系轉載:http://www.mobansheji.com/Article/303.html
最后加一个DIV中图片垂直居中
|
width
:
200px
;
height : 200px ;
|
background : #fff ;
|
border : 1px solid #CCC ;
|
text-align : center ;
|
} |
.Box img { |
vertical-align : middle ;
|
} |
.Box i { |
display :inline- block ;
|
width : 1px ;
|
overflow : hidden ;
|
height : 100% ;
|
margin-left : -1px ;
|
vertical-align : middle ;
|
} |
< div class = "Box" >< img src = "face.jpg" alt = "" />< i ></ i ></ div >
|
相关推荐
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...
要实现元素的垂直居中,有人会想到css中的vertical-align属性,但是它只对拥有valign特性的元素才生效,例如表格元素中的、、等,而像<div>、这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。...
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...
今天特意在网上找到了一款插件--jquery.valign,可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果,使用方法: 1、调用jquery库以及本插件 2、jquery方法调用,如本案例第22、23行 使用说明: 外侧...
jQuery实现上下左右垂直居中是一款jquery.valign插件,可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果。
jQuery实现上下左右垂直居中是一款jquery.valign插件,可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果。
在垂直方向上,可以设定表头的对齐方式,分别有居上、居中、居下3种。 基本语法 <th valign=Top> <th valign=Middle> <th valign=Bottom> 语法解释 Top为居上,Middle为居中,Bottom为居下。 文件范例:10-41.htm ...
o align -- 代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify)(此属性应该使用CSS实现) o valign -- 代表行的垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) |...
在垂直方向上,可以设定单元格的对齐方式,分别有居上、居中、居下3种。 基本语法 语法解释 TOP为居上,MIDDLE为居中,MOTTOM为居下。 文件范例:10-31.htm 设定单元格的垂直对齐方式。01 <!– ——————...
通过标记的VALIGN属性设定表格标题的垂直对齐。01 <!– —————————— –>02 <!– 文件范例:10-16.htm –>03 <!–文件说明:设定表格标题的垂直对齐–>04 <!– —————————— –>05 <...
标签属性 表格 属性 描述 常用属性值 height 设置行高度 像素值 align 设置一行内容的水平对齐方式 left、center、right ...对标签应用valign属性,用于设置一行内容的垂直对齐方式。 A B C 谢谢大家
下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶、可以居中、可以底部对齐 <!DOCTYPE html> <html> <head> [removed] function topAlign() { document.getElementById('tr2')....
标签属性 表格 属性名 含义 常用属性值 width ...在标签的属性中,重点掌握colspan和rolspan,其他的属性了解即可,不建议使用,均可用CSS样式属性替代。 当对某一个标签应用height属性设置高度时,该
HTML5基础CSS3基础 Table 属性 cellspacing 格子之间的距离 Cellpadding 格子和内容之间的距离 Align 左右位置 left center right Valign 上下位置 Border 边框值 无单位 Bgcolor 背景色 Tr 行 Td 列
<link rel="stylesheet" type="text/css" href="css/style.css" /> <div id="wrap"> <div id="top_content"> <div id="header"> <div id="rightheader"> 2009/11/20 ...
上一篇CSS教程 文章:CSS高级技巧:文字环绕图片 布局 CSS至关重要的作用, CSS的设计初衷. ...在table时代, align和Valign相当的好用, 而在CSS中却没有简单实现的方法,所以在标准化刚刚开始推广的时候
<link href="css/css.css" rel="stylesheet" type="text/css"> style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid...