css中各种情况下的元素的垂直和水平居中的问题
2024-10-18 18:14:56
问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器垂直水平居中显示??
No1: 外边的容器宽度和高度确认,里边是行内元素
.container{width:200px; height:100px; line-height:100px;}
//外边的容器的css设置和命名 这样就ok了
No2:里边的容器是img元素
.container{width:200px; height:100px; line-height:100px; vertical-align:middle; }
.wrap{vertical-align:middle;}//图片的命名和css代码
No3:就是里边的元素是div元素
.cantainer{width: 300px; height: 150px; background: blue; text-align: center; vertical-align:middle; display: table-cell;}
//添加display属性(好好看看这个属性哦)
.wrap{margin:auto; width:100px;}
No4:宽高固定的div在浏览器中水平/垂直居中
absolute将元素脱离文档流,通过“left: 50%; top: 50%;”和“margin-left: -width/2; margin-top: -height/2;”来实现; .div1{
background: red;width: 200px;height: 200px;position:absolute;
top:50%;left:50%;
margin-left:-100px;
margin-top:-100px; }
其实可以用js来计算里边容器的宽度和高度然后定位(涉及到js了 咳咳 以后再谈吧)
最新文章
- WCF学习第二篇:WCF 配置架构。这有助于对wcf配置的理解和记忆
- iframe框架用法
- iOS之关于 srand() 和rand()
- 注解:【有连接表的】Hibernate双向1->;N关联 (N端、1端同时参与控制关联关系)
- vmware workstation LINUX磁盘扩容
- java jfinal + ajaxfileupload.js 上传
- 缓存应用--Memcached分布式缓存简介
- 【完结】利用 Composer 完善自己的 PHP 框架(三)——Redis 缓存
- IE6下Png透明最佳解决方案(推荐) Unit PNG Fix
- 多目标遗传算法 ------ NSGA-II (部分源码解析) 快速排序代码 sort.c
- 再学ajax--第一天
- locate 命令详解
- Bellman-Ford算法(在边权可正可负时求最短路)
- vue安装教程总结
- Gitee vs插件(Gitee Extension for Visual Studio)
- 2018.10.12 NOIP训练 01 串(倍增+hash)
- Oracle根据字段值找到表名和列名
- TextView跑步灯效果及在特殊情况下无效的解决方式
- Unity使用JsonFX插件进行序列化
- caffe Python API 之Solver定义