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 一.为何要分栏高 ...
随机推荐
- LINQ动态查询类--[DynamicLinqExpressions]
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.L ...
- Math对象
<script type="text/javascript"> /* Math对象常用的方法: ceil 向上取整 floor() 向下取整 random() 随机数方 ...
- opencv中Mat类型数据操作与遍历
Mat作为opencv中一种数据类型常常用来存储图像,相对与以前的IplImgae类型来说,Mat类型省去了人工的对内存的分配与释放,转而自动分配释放.Mat Class主要包括两部个数据部分:一个是 ...
- 最新Android 出现Please ensure that adb is correctly located at问题的解决方法
最近经常遇到下面的问题 遇到问题描述: 运行android程序控制台输出: [2013-07-23 17:28:06 - ] The connection to adb is down, and a ...
- Special Pythagorean triplet
这个比较简单,慢慢进入状态. A Pythagorean triplet is a set of three natural numbers, a b c, for which, a2 + b2 = ...
- android项目中各个文件的介绍
src:java源码gen:自动生成 R.javaandroid.jarandroid Dependenvies 支持jar包assets:资产目录 小的数据库 网页 bin:编译生成的临时文件lib ...
- MCS51浮点计算程序
MSC-51 3字节和4字节浮点数计算程序,主要用于数据采集及上传,经过IEEE转换,在上位机直接显示. ;这是本人使用的MSC-51 3字节和4字节浮点数计算程序,主要用于数据采集及上传,经过IEE ...
- C51汇编语言完整源码
单片机最小系统,两位LED数码管由串口输出接两个164驱动,Lout,Rout为左右声道输出,SET, ALT0, ALT1为三个按键,也可自己在开始的I/O定义改成你想用的I/O口:12M晶振,若 ...
- python手记(38)
runfile(r'K:\testpro\testopencv.py', wdir=r'K:\testpro') http://blog.csdn.net/myhaspl myhaspl@qq.com ...
- perl dbi 测试 mysql wait_timeout
The number of seconds the server waits for activity on a noninteractive connection before closing it ...