css中不确定高度垂直居中2种方法

 　　例子1

　　不确定高度垂直居中

 代码如下  

/* center < */
.vetically {
    vertical-align: middle;
    display: table-cell;
    *position: relative;
}
.vetically_C {
    display: block;
    margin: 0 auto;
    text-align: center;
    *position: absolute;
    *top: 50%;
    *left: 50%;
    *margin-top: expression(-(this.height ) / 2);
    *margin-left: expression(-(this.width ) / 2);
}
/* center > */

　　例子2

　　标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。

 代码如下  

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>方法2 - 未知高度的图片垂直居中</title> 
<style type="text/css"> 
body { 
height:100%; 
} 
#box{ 
width:500px;height:400px; 
display:table-cell; 
text-align:center; 
vertical-align:middle; 
border:1px solid #d3d3d3;background:#fff; 
} 
#box img{ 
border:1px solid #ccc; 
} 
</style> 
<!--[if IE]> 
<style type="text/css">? 
#box i { 
display:inline-block; 
height:100%; 
vertical-align:middle 
} 
#box img { 
vertical-align:middle 
} 
</style> 
<![endif]--> 
</head> 
<body> 
<div id="box"> 
<i></i><img src="images/demo_zl.png" alt="" /> 
</div> 
</body> 
</html>
时间： 2024-04-26 00:57:56

css中不确定高度垂直居中2种方法的相关文章

Android中获取状态栏高度的两种方法分享

前言 最近在做一个关于FAB的功能的时候需要获取状态栏的高度,在网上查了很多种方法,下面是选出的比较合理的两个方法.主要参考stackoverflow的这篇问答:http://stackoverflow.com/questions/3407256/height-of-status-bar-in-android 方法一: private double getStatusBarHeight(Context context){ double statusBarHeight = Math.ceil(25

Word中输入立方米符号的三种方法

  Word中输入立方米符号的三种方法         Word中输入立方米符号方法一:输入法输入 其实现在有些输入法中集成了很多特殊符号,例如搜狗拼音中就有立方米符号,我们只需要打出立方米的拼音,就会出现一个立方米符号的选项. Word中输入立方米符号方法二:利用制作上标的方法 用制作上标的方法可以做出立方米符号的效果,但这种方法其实还可以细分为几种不同的操作,下面一一进行介绍. 一.在Word文档中输入3,然后将其选中,切换到"开始"选项卡,单击"上标"按钮即可

在Word文档中插入Cad图的3种方法

在word文件中插入我们绘制的cad图,方法大体上有三种,但是它们达到的效果却并不相同,有的显得精致些,有的显得粗糙些,根据我们写作的目的还要进行相应的再处理,这个过程有一些技巧,现在把它写下来,希望能给读者朋友以启发. 要在word文件中插入一个cad图,可以利用下面的三种方法来实现: 第一种,利用键盘上的"print screen sysrq"来抓取cad图,再通过系统自带的画图软件做进一步的修剪,去掉cad剪贴图中多余的部分,这项工作为了是能使图片在word文件中显示的足够的清晰

Flash中实现物体运动的三种方法

现在用Flash开发的游戏是越来越多了.很多朋友也很想学习用Flash制作游戏的方法.大家知道,不管在什么游戏中,实现物体的运动是游戏的前提,而不同的游戏里物体移动的方式又不尽相同.所以,想学习制作Flash游戏的朋友今天就先随我一起学学在Flash中实现物体运动的几种方法吧.几种方法如下: 方法一:通过单击按钮实现物体的单位运动 这种方法一般在需要按键的游戏中使用.你也可以给某个实体加上这段代码,然后通过单击这个实体达到某种游戏效果. 1.打开Flash,按快捷键"Ctrl + M"

实用技巧：PHP中调用Java类的两种方法

Java语言功能强大,因此在许多情况下在php中来调用Java的功能将十分有用.在php中调用Java语言有两种方法,一种是使用php中的Java扩展模块,另一种是使用minij2ee应用服务器提供的SJOP协议实现.下面我们来比较一下这两种方法各自的特点. 1.php的Java模块 php发布版中包含一个Java扩展模块,可以用来调用Java对象,例如: <?php$system=new Java("java.lang.System");print "Java ver

在VB中调用CHM 帮助的几种方法

在VB中调用CHM 帮助的几种方法 一个应用程序不论编制得如何完美,在很多情况下用户还是会对如何使用它提出问题. Visual Basic 提供了对两种不同帮助系统的支持:传统的 Windows 帮助系统 (WinHelp)和新的 HTML 帮助(CHM帮助).当我们制作好帮助文件后,就需要在程序的适当位置编写代码进行调用,本文将讨论几种在程序中调用CHM帮助文件的方法. 方法一 使用F1键:这种方法最简单,只需如下代码即可:Private Sub Form_Load() App.HelpFil

Excel中合并单元格的几种方法及合并单元格快捷键

  Excel中合并单元格的几种方法及合并单元格快捷键          如下图所示,希望将A1到E1,这之间所有单元格合并成一个大单元格操作方法如下: 合并单元格方法一:利用格式菜单上的"合并及居中"按钮合并单元格 ①首先,选中A1.B1.C1.D1.E1这些单元格; ②然后单击"格式"工具栏上面的"合并及居中"按钮; 此时,这几个单元格就已经合并成了一个大单元格了,是不是很简单呀. 合并单元格方法二:利用"设置单元格格式"

在Word文档中快速插入日期的五种方法

  在Word文档中快速插入日期的五种方法          方法1:使用"插入"选项卡中的"日期和时间"功能插入当前系统日期. 在"插入"选项卡的"文本"选项组中单击[日期和时间]按钮,打开"日期和时间"对话框,在"可用格式"列表框中选择用户想要的格式,如图1所示.如果用户希望每次打开Word时都自动更新时间,可同时选中"自动更新"复选框. 图1 打开"时

在html中添加script脚本的2种方法和注意事项

在html中添加script脚本有两种方法,直接将javascript代码添加到html中与添加外部js文件,这两种方法都比较常用,大家可以根据自己需要自由选择   在html中添加<script>脚本的方法: 1.可以直接将javascript代码添加到html中 复制代码 代码如下: <script type="text/javascript"> //javascritp代码 </script> 当解释器嵌入<script>代码时,h