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 一.为何要分栏高 ...
随机推荐
- 记一次MySQl 安装1067错误
1.今天阿里云windows server 2008 r2服务器上安装mysql,配置完发现无法启动mysql服务(并发设置的是500),查询windows日志提示 Unknown/unsupport ...
- IntelliJ IDEA 12 创建Web项目 教程 超详细版
IntelliJ IDEA 12 新版本发布 第一时间去官网看了下 黑色的主题 很给力 大体使用了下 对于一开始就是用eclipse的童鞋们 估计很难从eclipse中走出来 当然 我也很艰难的走 ...
- spring boot了解
spring4倾向于基于注解的配置,强化的注解的功能,对比与spring3还是有很多的区别:spring boot对spring的各个组件功能管理,基于默认配置即可简单构建一个spring4的项目,对 ...
- 2.2 文件 I/O 的基石:Path
Path通常代表文件系统中的位置,能浏览任何类型的文件系统,包括zip归档文件系统: 文件系统中的几个概念:目录树.根目录.绝对路径.相对路径: NIO.2中的Path是一个抽象构造,你所创建和处理的 ...
- 怎么把QQ我的收藏表情图片转移到另一台电脑上
把收藏的QQ表情从一台电脑转移到另一台电脑的操作步骤如下: 1.在有表情的电脑登陆QQ,随便打开一个聊天窗口,点击[表情],选择[表情设置],点击[导入导出表情包],选择[导出全部表情包]: ...
- Vector3.Dot 与Vector3.Cross
Vector3.Dot(点积) : 点积的计算方式为: a·b=|a|·|b|cos<a,b>; 其中<a,b>和<b,a> 夹角不分顺序; 物理学中点积用来计算 ...
- android:onclick属性
android:onclick属性设置点击时从上下文中调用指定的方法,此时给指定一个方法名.例如: xml中: <Button android:layout_width="wrap_c ...
- SQL basic
Function 从例子学习 drop function dbo.getWorkingDateCount; --getWorkingDateCount = functionName CREATE FU ...
- ossim/zabbix/logstash
http://dl528888.blog.51cto.com/2382721/1639579 http://307033.blog.51cto.com/297033/473666 http://lym ...
- cf C. Mittens
http://codeforces.com/contest/370/problem/C 题意:有n个人,m中颜色的手套,开始每个人都是两只相同颜色的手套,经过交换最多可以换出多少个人戴不同颜色的手套. ...