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 一.为何要分栏高 ...
随机推荐
- Struts2 框架验证
struts2框架验证(xml方式): * 首先要从页面中获取对应的标签name属性的值,在动作类action中声明同名的属性,提供get和set方法 * 创建一个xml格式验证文 ...
- 写一个“标准”宏MIN,这个宏输入两个参数并返回较小的一个。
#define MIN(A,B) ((A)<=(B)?(A):(B))
- 直接拨号、将电话号码传入拨号程序、调用拨号程序、调用系统浏览器浏览网页、调用系统程序查看联系人、显示系统设置界面和显示Wi-Fi设置界面代码
直接拨号.将电话号码传入拨号程序.调用拨号程序.调用系统浏览器浏览网页.调用系统程序查看联系人.显示系统设置界面和显示Wi-Fi设置界面代码 拨打号码的代码如下: Intent callIntent= ...
- ASP.NET常用技术之加密解密
在开发项目中有许多数据需要我们进行加密解密操作,这里介绍几个加密解密的方法. 一:MD5加密 MD5加密是一种单向的加密算法,它只能加密,加密后不能进行逆向解密操作,常用于数字签名和加密用户密码. 下 ...
- php实现冒泡排序
冒泡排序是非常容易理解和实现,,以从小到大排序举例:设数组长度为N.1.比较相邻的前后二个数据,如果前面数据大于后面的数据,就将二个数据交换.2.这样对数组的第0个数据到N-1个数据进行一次遍历后,最 ...
- MemCached高级缓存
MemCached高级缓存配置 Memcache相关介绍: memcache 是一个高性能的分布式的内存对象缓存系统,它能够存储各种各样的的数据,包括图片,视频,文件等等.缓存功能. DB.数据源-- ...
- centos6.2下安装星际译王stardict3.0
星际译王是一个Linux下很好的翻译软件. 我的系统是centos6.2 32位版.本来在http://code.google.com/p/stardict-3/downloads/list 上下的源 ...
- Ubuntu下搭建本地WordPress站点
想在本地搭建WordPress博客站点作测试用?本教程一步一步教您在Linux上搭建一个LAMP(Linux, Apache, MySQL, PHP)服务器并部署WordPress博客. 请注意在复制 ...
- Java在ACM中的使用
1.基本框架 import java.oi.*; import java.util.* public class Main { public static void main(St ...
- Python自动化运维之7、生成器、迭代器、列表解析、迭代器表达式
迭代器和生成器 1.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外 ...