<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head><title>垂直居中布局 Vertical-aligned 应用测试：兼容IE6/8/FF</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>
</head>
<body>
<H4>垂直居中布局 Vertical-aligned 应用测试：兼容IE6/8/FF</H4>
<div style="border:1px solid red; height:200px;">
<!--
设置一个空的SPAN，这个SPAN很重要，后面内联元素的位置齐将以它为参考。
display:inline-block的设置将触发IE6的LAYOUT，使之可设置高度，其它浏览器支持这个属性;
-->
<span id="s1" style="border:1px solid blue;width:10px; margin-left:-1px;vertical-align:middle; display:inline-block; height:100%;"></span>
<!--一系列的内联元素，有图片及其它的文本元素-->
<img id="s2" src="star.gif" alt="star" style="border:1px solid green;vertical-align: middle;" />
<span id="s3" style="border:1px solid green;">常口信息(2)条.</span>
<img id="s4" src="star.gif" alt="star" style="border:1px solid green;vertical-align: middle;" />
<span id="s5" style="border:1px solid green;vertical-align: middle;/*vertical-align: 80px;vertical-align: 80%;*/">ZXY测试居中</span>
</div>
<p>测试总结：
<ul>
<li>1)经测试，此种垂直居中方式的布局方式，兼容IE6+及FF浏览器</li>
<li>2)ID为S1的SPAN将是后面一系列内联元素的对齐的标杆（即位置参考相对坐标）</li>
<li>3)后面内联元素的相对位置只与S1有关，与它的相邻元素无关</li>
<li>4)调整后面内联元素的高度位置，比如S5，有多种方法：
<br>vertical-align: middle; --直接设置属性值
<br>vertical-align: 80px; --也可设置相对于S1的高度像素
<br>vertical-align: 100%; --也可设置对对于S1的高度百份比。注意这个100%是这个首先是这个文本是高度，假如这个文本的高度为20px，
那么这个100%=20PX;如果要设置到80px的高度，则为：vertical-align: 400%;
</li>
<li>5)除S1外的所有内联元素的相对位置都是基于‘S1=vertical-align:middle’这个基线位置而言的，即50%的高度，假如父DIV的高度为200px,则'middle基线'=100px;</li>
</ul>
<br>
</body>
</html>
- 大小: 147.8 KB
分享到：
相关推荐
新版MDK-RAM_v5.25.2使用JLink下载调试““**JLink Warning: Mis-aligned memory read: Address: ......”错误解决
我的keil5是MDK524版本，在使用JLink调试时出现JLink Warning:mis-aligned memory write:address:0x20000000,numbytes:2,alignment:2(halfword-aligned)的警告。找到c:\Keil_v5\ARM\segger（Keil安装目录）下的JL2...
驱动从5.1.5版本中备份来，用于解决MDK5.2.5版本后下载出现的**JLink Warning: Mis-aligned memory write: Address: 0x20000000, NumBytes: 2, Alignment: 2 (Halfword-aligned)的错误
wordvec-aligned-zh-zh 对齐的中英文双语单词向量。 import os from utils import read_wordvec if not os . path . exists ( 'wiki.en.align.vec' ): os . system ( 'wget ...
AutoCAD是Autodesk公司开发的计算机辅助设计（CAD）程序，广泛应用于工程制图、建筑设计、工业设计等多个领域。这份快捷键列表非常详尽，涵盖了AutoCAD中各种常用命令的快捷操作方式。下面我将详细介绍这些快捷键...
- 0000723: DBGrid: numeric column is not aligned to right - 0000722: Setting Align := alCenter on DBGridColumns does not work - 0000715: OmniHTTPD and UniGUI ISAPI - 0000724: Runtime assignment for...
Center-Aligned SVPWM是一种广泛应用于三相三级逆变器控制系统中的脉宽调制策略， MCU 实现 Center-Aligned SVPWM 是一种高效的实现方式，因为 MCU 的 PWM 模块可以轻松生成中心对齐的 PWM 信号。本文探讨了 SVPWM ...
在C++编程语言中，输出格式的控制是非常重要的一个方面，尤其是在需要精确控制数据展示方式的应用场景中。本文将详细介绍如何使用C++的标准库来实现对输出格式的精确控制。 #### 一、使用hex、dec、oct设置进制 在...
标题中的“精确算法matlab代码-field-aligned-current”指的是一个用于计算地球赤道平面上场对准电流的程序，这是地球物理学领域的一个重要概念。场对准电流，也称为极光电流，是地球磁层中的一种电流系统，它沿着地...
This version of the System ROM contains updates aligned with the Intel Product Update (IPU) version IPU.2023.1 guidance. Deliverable Name: HPE ProLiant DL380/DL360 Gen9 System ROM - P89 Release ...
matlab精度检验代码LFW评估 .../disk2/data/FACE/LFW/lfw-aligned-mtcnn/list.txt fc5 face_snapshot_0509_val0.1_batch476_iter_36000.mat & 2. LFW 10倍评估 python要求： cd evaluation_10folds pytho
《WriteMemory：按键精灵插件在游戏编程中的应用》 在计算机编程领域，尤其是游戏自动化和辅助工具开发中，WriteMemory技术是一种常见的实践，用于直接修改程序运行时的内存值，实现特定功能。本文将围绕“Write...
Bootstrap 3 是一个广泛使用的前端开发框架，它简化了网页设计和响应式布局的实现。在Bootstrap 3中，Pager组件是一种专为分页设计的工具，常用于展示大量内容时进行页面导航，例如博客文章或产品列表。教程48专注于...
- 进入包含JLINK驱动的文件夹（如野火M3光盘目录下的“3-安装软件\1-JLINKV8驱动”）。 - 执行安装程序Setup_JLinkARM_V428c.exe进行驱动安装。 - 安装过程通常较为简单直观，按提示操作即可完成。 3. **验证...
解决/usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found 问题 步骤如下： 解压文件: $ unzip gcc-8.3.0.zip 解压完成，进入文件目录: $ cd gcc-8.3.0 利用源码包里自带的工具下载所需要的依赖项: $ ./...
来源：apkpure.com (官网)、APKpure_V2.13.6（官网下载）。
CXML 可以将紧凑型的XML文件转换为适当格式的XML文件。示例：紧凑型from cxml import xml xml('w:p/(w:pPr/w:jc{w:val=right},w:r/w:t"Right-... <w:t>Right-aligned</w:t> </w:r> </w:p 标签：CXML
Altium Designer是一款流行的PCB设计软件，广泛应用于电子工程师和设计师之中。它提供了一系列强大的功能和工具，用于设计、编辑和检查电路板布局。在Altium Designer中，用户可以利用多种快捷键来提高工作效率。...
### MDK调试时出现MEMORY_MISMATCH错误的原因及解决方法 #### 一、问题背景与表现 在使用RealView MDK配合ULink仿真器进行嵌入式系统开发与调试的过程中，开发者可能会遭遇“MEMORY_MISMATCH”错误。...