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 一.为何要分栏高 ...
随机推荐
- 你好,C++(25)函数调用和它背后的故事5.1.2 函数调用机制
5.1.2 函数调用机制 在前面的学习中,我们多次提到了“调用函数”的概念.所谓调用函数,就是将程序的执行控制权从调用者(某个函数)交给被调用的函数,同时通过参数向被调用的函数传递数据,然后程序进入 ...
- 利用Format函数格式化时间和日期
在做机房收费系统的时候,因为需要使用到日期进行查询,所以在数据表中没有使用自动添加日期的功能,而是采用了自定义的格式插入.但由于事先没有对时间转换的格式进行统一,导致后面查询时出现的问题不断. 插入时 ...
- PHP扩展开发(5) - PHP常量的定义和读取
1. 定义 //定义PHP常量REGISTER_STRINGL_CONSTANT("SIMPLE_VERSION", PHP_SIMPLE_VERSION, sizeof(PH ...
- 【结构型】Bridge模式
桥接模式是为了将对象的抽象与实现分离,使得它们可以独立变化.简简单单的一句话,却已经是站在了更高抽象层面上来看待.设计.解决问题.平常我们多是对具体问题进行分析.抽象,然后就开始设计,这对多数情况下基 ...
- 如何用PowerPoint制作闪烁的星星
在PPT中,PPT动画说是幻灯片PPT中的精华是当之无愧的!ppt文件有了动画,犹如插上翅膀的鸟,让PPT的色彩衍生出了更多的特色.只要你的ppt动画效果制作的对,你的幻灯片将明显与众不同,观众也更容 ...
- C#执行javascript代码
最近在做网站自动登陆小工具,遇到技术屏障.密码在submit时会使用js进行加密.这时我需要模拟这个加密过程,想到使用C#执行javascript代码. 对于执行javascript代码,纯代码方式使 ...
- HTML5最佳实践
首先先给大家推荐个不错的 前端 网站:http://www.tystudio.net HTML5正迅速称为web前端开发技术标准,作为一名前段开发人员,了解并正确的使用HTML5制作网站变得越来越重要 ...
- eclipse中JSP开发环境的配置
1. Java环境 自行百度配置 2. Web Server环境安装: Web Server选择流行的Apache Tomcat .到http://tomcat.apache.org/ 处下载, ...
- 为什么c程序里一定要写main函数
一. 学习过程 编写程序f.c: 对其进行编译,正常通过,再对其进行连接,出现错误: 显示的出错信息为: 翻译成中文是:在c0s模块没有定义符号’_main’. 那么这个错误信息可能与文件c0s.ob ...
- C++面试问题总结
转自:http://blog.csdn.net/wangtengqiang/article/details/8061806 1.static用法 static 的成员函数和成员变量,可直接通过类名:: ...