css实现未知尺寸元素水平垂直居中的方法

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:05 我要评论(0)

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

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+.

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...