css技巧——垂直居中
2024-09-06 14:43:27
1、父元素确定的单行垂直居中
通过设置父元素的 height 和 line-height 高度一致来实现的。
2、父元素确定的多行垂直居中
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:
2.1、vertical-aligh方法:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以不需要显式设置。
2.2、激活vertical-align属性方法:
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style> <div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
3、隐性改变元素display值
当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:
- position : absolute
- float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
最新文章
- Matrix4x4矩阵变换、欧拉角转四元数、角度转弧度
- window.location事件
- FTP协议
- OAF_开发系列25_实现OAF中Java类型并发程式开发oracle.apps.fnd.cp.request(概念)
- Kruskal算法(三)之 Java详解
- UTF-8 带签名和不带签名的区别
- 全面理解Linux输入输出重定向
- iOS Developer Libray (中文版)-- Defining Classes 定义类
- LeetCode_Length of Last Word
- Android变化如何破解几场金
- Spring框架_代理模式(静态代理,动态代理,cglib代理)
- 九、Hadoop学习笔记————Hive简介
- 移动端-处理后台传过来的html中图片的显示
- 整理c盘文件
- Ubuntu最常见的包问题
- 使用node.js &; live server在移动端测试网站
- InnoDB: Error: Table ";mysql";.";innodb_table_stats"; not found.
- MySQL mysqlbinlog 访问mysql-bin日志出错
- Linux 小知识翻译 - 「文件系统的种类」
- collectd 检测cpu使用率