CSS解决未知高度的垂直水平居中自适应问题(4)
作者:zishu 来源:zishu博客 发布时间:2009-03-17 17:06:00
标准浏览器可将父级元素显示方式设定为display: table;,内部子元素设为display:table-cell 和vertical-align;使其垂直居中,但非标准浏览器是不支持;也就是说这样设完后IE6是不支持的,但FIREFOX和IE是支持的;
我用的是最笨的办法,从上往下一级级覆盖;
<style>
body {padding:0; margin:0; }
/*这些是专用FIREFOX写的,注意IE7也认识*/
html,body{ height:100%;}
#infoBox[id]{text-align:center; width:100%; height:100%; display:table;}
#info[id]{ display:table-cell; vertical-align:middle;} /*这里可以指个宽度试试,是可以自适应的*/
/*专为IE6写的*/
*html #infoBox{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto}
*html #info{position:relative; top:-50%; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试,是可以自适应的*/
/*这理是专用IE7写的,注意[id]要加上,不然优先JI没有最上边那段NB*/
*+html #infoBox[id]{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto}
*+html #info[id]{position:relative; top:-50%; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试,是可以自适应的*/
</style>
<div id="infoBox">
<div id="info">
this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />
</div>
</div>
</html>


猜你喜欢
- 这片文章只对本地存储方法做介绍,若要查看本地存储组件使用方法的介绍请稍等。本地数据持久化(或者也叫做浏览器本地存储)是一种在浏览器中长久保存
- 本文实例为大家分享了python实现图像拼接的具体代码,供大家参考,具体内容如下一、效果 二、代码1、单张图片拼接# 图片拼接fr
- 提示框提示框的基本使用方式为:<span data-toggle="tooltip" data-original-
- python脚本自动生成需要文件在工作中我们经常需要通过一个文件写出另外一个文件,然而既然是对应关系肯定可以总结规律让计算机帮我们完成,今天
- 前言:在做一个商城项目的时候,需要实现商品搜索功能。说到搜索,第一时间想到的是数据库的 select * from tb_sku where
- 用python语言读取二进制图片文件,并提取非零数据统计信息(例如:max,min,skewness and kurtosis)python
- 从一个问题说起五年前在腾讯的时候,发现分页场景下,mysql请求速度非常慢。数据量只有10w的情况下,select xx from 单机大概
- 之前有群友反应同事给了他一个几百MB的sql脚本,导入数据库再从数据库读取数据有点慢,想了解下有没有可以直接读取sql脚本到pandas的方
- 需求在业务中,会碰到许多点击请求的情况,在请求前改变一个lock变量(在lock变回来之前,点击无效),在请求回调中再改变lock.以确保在
- 对于MySQL数据库,如果你要使用事务以及行级锁就必须使用INNODB引擎。如果你要使用全文索引,那必须使用myisam。 INNODB的实
- 1.前言在移动商业广告的测试的工作中,经常会需要对广告请求进行捕获和分析,常使用的有两个测试工具:fiddler,Charles,这两个工具
- 问题你有一个数据序列,想利用一些规则从中提取出需要的值或者是缩短序列解决方案最简单的过滤序列元素的方法就是使用列表推导。比如:>>
- 如下所示:#!/usr/bin/python#-*- coding: utf-8 -*-fin=open('add_1.txt
- 首先我们有一个接口可以获取动态的vkeyhttps://vv.video.qq.com/getinfo?otype=json&app
- 在正式编写爬虫案例前,先对 scrapy 进行一下系统的学习。scrapy 安装与简单运行使用命令 pip install scrapy 进
- 代码如下:'个人代码风格注释(变量名中第一个小写字母表表示变量类型) 'i:为Integer型; 's:为Strin
- 下面有python教程栏目为大家建立一个完美的python项目,希望可以帮助到大家,一起讨论进步~当开始一个新的 Python 项目时,大家
- 1. ASCII码我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串。每一个二进制位(bit)有0和1两种状态,因此八个二进制
- 本文实例讲述了JavaScript通过改变文字透明度实现的文字闪烁效果。分享给大家供大家参考,具体如下:运行效果图如下:完整实例代码如下:&
- 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。以下文章来源于Pyth