css垂直居中的几种方式
1. 对于可以一行处理的 设置 height:apx; line-height:apx;
2.对于一段文字(会多行显示的)
->2.1如果是可以设置一个固定高度的
父元素使用display:table; height: apx; 子元素使用 display:table-cell; vertical-align:middle;
note: vertical-align属性只对部分html元素有效 具体是拥有valign特性的(X)HTML标签
比如<img> 基本上 对于inline-block显示的元素(内联元素)有效
->2.2如果是一个高度不固定的
设置上下 一样的内补 padding-top:apx; padding-bottom:apx;
->2.3 使用csshack支持ie6 垂直居中 综合考虑 table-cell方案 多层嵌套
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
参考:http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
css垂直居中的几种方式的更多相关文章
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- CSS垂直居中的8种方法
CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- python 中增加css样式的三种方式
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权
如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
随机推荐
- Facebook Reporting API -- Facebook 数据导出API
1.获取token 浏览器打开 "访问口令工具" (FB链接请FQ) https://developers.facebook.com/tools/accesstoken/ App ...
- Python学习之函数参数
上一节,我们学习了Python中是如何定义和调用函数且如何得到返回值的.在调用函数时,有的函数需要参数来启动函数,有的则无需参数.这一节我们来介绍Python中有哪些参数类型. 位置参数 在调用函数时 ...
- 15.9,python操作redis集群
上代码 .对redis的单实例进行连接操作 python3 >>>import redis >>>r = redis.StrictRedis(host=, db ...
- 真是shi
降雨量那题,真踏马shi. 调到还有五个RE不调了. 开始以为map可水后来发现一定要二分查找一下. 这种题没啥营养,不过我发现了我ST表一处错误并打了个板子.就这点用处吧. 这几天做题太少了,每天不 ...
- 如何将多个Eclipse项目导入IntelliJ IDEA
技术交流群:233513714 IntelliJ IDEA 与Eclipse在新建项目上的叫法略有不同,区别见下图. 当我们使用idea后再次使用eclipse时就会有很多不适,下面介绍一个多项目的导 ...
- Django的Field(字段)
字段 1.models.AutoField 自增列 = int(11) 如果没有的话,默认会生成一个名称为 id 的列,如果要显示的自定义一个自增列,必须将给列设置为主键 primary_key=Tr ...
- 安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情(一)
本文导航 -1. 注册并启用红帽订阅 -2. 使用静态 IP 地址配置网络 -3. 设置服务器的主机名称 -4. 更新或升级最小化安装的 CentOS -5. 安装命令行 Web 浏览器 -6. 安装 ...
- 随笔 —— 门徒 & 无限恐怖
门徒 忧思缠身,所为何物 不知何人,可免世俗 每每朝暮,心无释处 悲从中来,如泣如诉 仁者存世,满怀悲苦 逝者如斯,追还无路 上天无门,开怀捧腹 无路偏行,我行我素 无限恐怖 饥寒苦难谁知故,日日行路 ...
- 【 Logistic Regression 】林轩田机器学习基石
这里提出Logistic Regression的角度是Soft Binary Classification.输出限定在0~1之间,用于表示可能发生positive的概率. 具体的做法是在Linear ...
- Javascript在浏览器中的加载顺序详解!
现在前端用javascript用的比较多,当然真心的说这个语言是一个非常业余的语言,但是用的人很多,所以也比较火.今天想完成一个javascript外部文件自动加载的设计(类似于java或者php的i ...