垂直居中
2016-04-19 21:34
267 查看
垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码:<div class="container"> hi,imooc! </div>
css代码:
<style> .container{ height:100px; line-height:100px; background:#999; }</style>
垂直居中-父元素高度确定的多行文本(方法一)
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。下面看一下例子:html代码:<body><table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>css代码:table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
垂直居中-父元素高度确定的多行文本(方法二)
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。html代码:<div class="container"><div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>css代码:<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。
隐性改变display类型
有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:position : absolutefloat : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。如下面的代码,小伙伴们都知道 a 标签是行内元素,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了。<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>css代码<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
相关文章推荐
- spark源码分析之任务调度篇
- CodeForces 638B Making Genome in Berland
- PHP mail() 函数
- swift快捷键大全
- 充分利用时间 踏踏实实
- 典型用户分析
- pda完美结合开销售单据haohantech-安卓打票扫描PDA智能POS 发展现状如何,会取代传统电脑 代替手工开单 么?
- 车站订票系统可行性分析报告
- linux快捷键
- executeScalar ExecuteNonQuery
- android将对象写入文件和从文件中读取对象数据
- Python趣味编程---Python也会讲笑话
- 密码发生器
- 有效数字的保留
- Qt中的窗口部件
- 【实践】获取CKEditor的html文本、纯文本、被选中的内容及赋值
- JS断点调试心得(转)
- 阶乘因式分解(—)
- spark源码分析之Executor启动与任务提交篇
- Android源码国内源