展会信息港展会大全

css实现未知尺寸元素水平垂直居中的方法
来源:互联网   发布日期:2016-03-25 16:05:44   浏览:2525次  

导读:今天又用到了,所以干脆记下来吧,方便以后好找一点。以下方法总结自网上的各位前辈的方法,希望对各位同学会有所帮助。1.table表格<table><tbody> <tr> <td>水平垂直居...

今天又用到了,所以干脆记下来吧,方便以后好找一点。以下方法总结自网上的各位前辈的方法,希望对各位同学会有所帮助。

1.table表格

<table><tbody> <tr> <td>水平垂直居中的随意内容</td> <td>水平垂直居中的随意内容</td>…类似这样的,

垂直居中对其来说,也是非常简单的事。table cells 的 vertical-align:middle 就可以直接解决。所以实现起也来只要这样一行代码:

td{ vertical-align:middle; }

2.display:table-cell实现

代码如下

复制代码

<div id=”demo”>

<p>水平垂直居中的随意内容</p>

</div>

#demo{ display:table; width:500px; margin:10px auto; background:#eee; }

#demo p{ display:table-cell;vertical-align:middle; height:100px;}

该方法只兼容ie8+.要解决兼容问题的话,可能要用到下面这个通用方法:

代码如下

复制代码

html部分

<div class="wrap">

<div class="hack">

<div class="cnt">

content

</div>

</div>

</div>

/* CSS 部分的代码实现:整体代码参见上述 demo*/

.wrap{

width:500px;height:300px;border:3px solid #ddd;margin:0 auto;padding:20px;display:table;

*position:relative;

}

.hack{

display:table-cell;vertical-align:middle;

*position:absolute;*top:50%;

}

.cnt{

*position:relative;*top:-50%;

}

3.inline-block实现

代码如下

复制代码

<div id=”demo”>

<p>水平垂直居www.111cn.net中的随意内容</p>

</div>

#demo{

height:100px;

text-align:center;

}

#demo:after{

display:inline-block;

width:0;

height:100%;

vertical-align:middle;

content:”;

}

#demo p{

display:inline-block;

vertical-align:middle;

}

垂直方向的对齐排版需使用 vertical-align ,并且只应用于inline level, inline-block level 及 table-cells 元素上;其次 vertical-align 的对齐就基于每个 line box(行框) 的,简单的说,inline level元素按照 Normal flow 水平排版出一行就会形成一个line box,其高度由内容形成,如果换行,则又是另一个line box,所有一段文本可能会分布在多个line box里,这些不重叠的line box被称作为a vertical stack of line boxes(一个垂直堆叠的线框集合)这些。同样的该方法支持ie8+.

用inline-block布局会产生一个间隙的bug,虽然能解决,但是还是不推荐用。具体解决方法:

代码如下

复制代码

<div id=”demo”>

<p>这是一个终极实现的水平垂直居中实例</p>

<!–[if lt IE 8]><span></span><![endif]–>

</div>

#demo{

height:100px;

text-align:center;

font-size:0;

}

#demo:after,#demo span{

display:inline-block;

*display:inline;

*zoom:1;

width:0;

height:100%;

vertical-align:middle;

}

#demo:after{

content:”;

}

#demo p{

display:inline-block;

*display:inline;

*zoom:1;

vertical-align:middle;

font-size:16px;

}

这个方法基本无Bug了,支持ie6+也解决了间隙的bug.

补充方法:定义定位实现未知高度元素的垂直居中(兼容IE5.5678910 firefox chrome)

需要在以上基础上改变HTML结构,把img放在一个元素中间,如下:

代码如下

复制代码

<div class="box">

<p>

<img src="/nice_mb/08/1c/24769.jpg" />

</p>

</div>

在支持display为table-cell的浏览器中依然用vertical-align:middle来实现,在IE5.5IE6IE7中利用定位来实现垂直居中,具体代码如下:

代码如下

复制代码

.box {

border: 1px dashed #ccc;

height: 200px;

width: 200px;

overflow: hidden;

display: table-cell;

vertical-align: middle;

*position:relative;

}

p {

*position:absolute;

*top:50%;

width: 100%;

text-align: center;

}

img {

*position:relative;

*top:-50%;

}

实现绝对居中的另类方法

代码如下

复制代码

<style type="text/css">

.outer{

background:#9F6;

width:100%;

height:400px;

position:relative;

}

.inner{

width:50%;

height:50%;

background:#990;

margin:auto;

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

}

</style>

<div class="outer">

<div class="inner">绝对居中</div>

</div>

兼容性:IE8+、firefox、chrome

注意:这里必须设置height属性才能居中

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港