css实现ie6以上文字高度未知垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description"content="">
<meta name="keywords"content="">
<link href=""rel="stylesheet">
<style> body {
padding: 0;
margin: 0;
}
.content {
border: 1px solid red;
width: 500px;
margin: 0 auto;
font-size: 12px;
line-height: 1.8;
} /*标准游览器版本*/
html, body {
height: 100%;
}
.wrapper {
text-align: center;
width: 100%;
height: 100%;
display: table;
}
.subwrap {
display: table-cell;
vertical-align: middle;
} /*IE6*/
*html .wrapper {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
display: block;
height: auto
}
*html .subwrap {
position: relative;
top: -50%;
text-align: center;
} /*IE7 可以合并 但是为了更好说明 没有合并*/
*+html .wrapper {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
display: block;
height: auto
}
*+html .subwrap {
position: relative;
top: -50%;
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="subwrap">
<div class="content">
关于 CSS 的未知高度水平垂直居中问题的未知高度水平垂直居中问题的未知高度水平垂直居中问题的未知高度水平垂直居中问题的未知高度水平垂直居中问题
<br />
</div>
</div>
</div>
</body>
</html>
css实现ie6以上文字高度未知垂直居中的更多相关文章
- css实现未知高度水平垂直居中
页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...
- css布局-多行文字垂直居中
方法一: 代码: <style> *{padding: ;margin:;font-size: 12px;} div{float: left;width: 200px;height:200 ...
- 纯CSS实现多行文字垂直居中几种方法解析
场景:父元素 高度固定,如何使其中的文字垂直居中? 1.table布局: 利用display:table+display:table-cell的方法 <!DOCTYPE html> < ...
- 使用css属性line-height实现文字垂直居中的问题
使用css属性line-height实现文字垂直居中的问题 1.使用css属性line-height实现文字垂直居中 方法比较简单,但是只能实现单行文字的垂直居中. 单行垂直居中效果如下: 要是p ...
- div在父集高度未知的情况下垂直居中的方法
父集高度未知,子集高度已知: 可以使用弹性盒来解决: justify-content属性定义了项目在主轴上的对齐方式. align-items属性定义项目在交叉轴上如何对齐.
- css实现div,文字水平居中的方案。
本文的目的为记录个人开发中常用的几种居中方案,以供大家参考. //basic css html, body { height: 100%; width: 100%; margin: 0; paddin ...
- CSS 在IE6, IE7 和IE8中的差别////////////////z
CSS 在IE6, IE7 和IE8中的差别 关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存.截至本文,Internet Explorer各个版本总共占据了 ...
- css+div如何解决文字溢出
看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...
- 纯CSS实现侧边栏/分栏高度自动相等
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...
随机推荐
- Knockoutjs官网翻译系列(二) Observable 数组
承接前文,前文书说道了KO框架中如何使用observable的视图模型属性来与UI元素进行绑定并自动进行双向更新的事儿.observable属性除了服务基础数据类型之外,还定义了专门为服务数组类型的o ...
- 有关Ajax实现的两种方法
首先我们来常见的Jquery式的Ajax写法,以及在java后台的取值 /** *AJAX */ function showLastTime(){ var facilityId = $('*[name ...
- Java集合类笔试题
介绍Collection框架的结构 Collection接口是单值存放的最大父接口,可以向其中保存多个单值的数据(所谓单值就是指集合中的每个元素都是一个对象).其子接口主要有:List.Set.Que ...
- php cgi 与 cli 区别
以CGI方式运行时,web server将用户请求以消息的方式转交给PHP独立进程,PHP与web服务之间无从属关系:CLI则是命令行接口,用于在操作系统命令行模式下执行PHP,比如可以直接在win的 ...
- linux awk 中 RS,ORS,FS,OFS 区别与联系【转】
linux awk 中 RS,ORS,FS,OFS 区别与联系 http://blog.csdn.net/jesseen/article/details/7992929
- C# 文件读写异常“正由另一进程使用,因此该进程无法访问该文件”
最近在对文件进行读写操作时,利用using的方法可还是遇到了异常"文件正由另一进程使用,因此该进程无法访问该文件": public bool WriteUserInfo(strin ...
- 『电脑技巧』浅谈Win7的文件共享设置
随着移动存储设备的普及,很少有小伙伴喜欢使用局域网“文件共享”这一捷径了 而且自从XP之后,Windows系列主机共享设置貌似比较麻烦 虽然事实并不是看上去那样(Win7也很Easy的说 = =) 现 ...
- ui router digest 10 time
refer : https://github.com/angular-ui/ui-router/issues/600 $urlRouterProvider.when("/", &q ...
- USB状态错误原因
USBD_STATUS调试过USB的同学肯定见过BUS Hound里面给的各种错误提示,但是大家是否知道是什么意思呢? USBD_STATUS 出错原因,详解如下: The USBD_STATUS ...
- WIN7下关闭驱动数字签名检查的方法
内容是转的,最后一步貌似没什么用处,水印是去不掉的,不过也无所谓,关键是驱动能用了,要不完全瞎了 实测win7 32位旗舰版可用 ================================= ...