`
xiaoyongzeng
  • 浏览: 15349 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

垂直居中布局 Vertical-aligned 应用测试:兼容IE6/8/FF

阅读更多
<!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
分享到:
评论

相关推荐

    STM32倒立摆PID学习资料合集:含MATLAB仿真自动生成代码与倒立摆原理图pcb

    内容概要:本文详细介绍了如何利用STM32和MATLAB实现倒立摆控制系统。首先,文章讲解了硬件部分,包括STM32F4作为主控、TB6612驱动直流电机以及MPU6050进行角度采集。接着,深入探讨了PID控制算法的应用,尤其是增量式PID算法及其参数调节方法。此外,文章强调了MATLAB Simulink仿真的重要性,展示了如何通过Simulink自动生成适用于STM32的嵌入式代码。最后,分享了一些实用技巧,如角度采集的互补滤波算法、PWM输出限幅、硬件设计注意事项等。 适合人群:对嵌入式系统和自动化控制感兴趣的电子工程师、机器人爱好者以及有一定编程基础的学习者。 使用场景及目标:①帮助读者理解并掌握倒立摆控制系统的原理和技术细节;②提供从理论到实践的具体步骤指导,便于读者复现实验;③培养解决实际问题的能力,提高对PID控制和其他相关技术的理解。 其他说明:文中提供了大量源代码片段和硬件设计建议,有助于读者更好地理解和实施项目。同时,作者还分享了许多个人经验和常见错误,使得初学者能够避开一些潜在的陷阱。

    多种液体混合组态王6.53仿真监控系统程序设计与实现

    内容概要:本文详细介绍了使用组态王6.53构建多种液体混合仿真监控系统的过程。从系统概述出发,涵盖了工程建立、变量定义、画面创建、命令语言编写、监控与调试等多个方面。具体实现了液位监测、阀门控制、搅拌控制、报警处理等功能,并针对可能出现的问题如模拟量输入抖动、阀门死锁、电机启动电流冲击等提供了有效的解决方案。此外,还探讨了硬件配置、数据记录、性能优化等方面的内容,强调了系统稳定性的重要性和实际应用中的注意事项。 适用人群:从事工业自动化领域的工程师和技术人员,尤其是对组态王有一定了解或正在学习组态王的初学者。 使用场景及目标:适用于需要开发类似液体混合仿真监控系统的工程项目,旨在提高系统的稳定性和可靠性,减少故障发生率,提升生产效率。 其他说明:文中不仅提供了详细的步骤指导,还分享了许多作者在实践中积累的经验和技巧,对于理解和掌握组态王的应用具有很高的参考价值。

    双馈风力发电机的直接功率控制Simulink与Matlab模型分析及矢量控制策略研究

    内容概要:本文详细介绍了双馈风力发电机(DFIG)采用直接功率控制(DPC)策略的Matlab/Simulink模型搭建过程。首先解释了DPC相对于传统矢量控制的优势,然后逐步讲解了模型各组成部分的搭建方法,包括风速模块、风力机模型、双馈发电机模型、变换器模型和直接功率控制器模块。文中还提供了具体的MATLAB代码示例,展示了如何实现风速模拟、功率计算、PI控制算法等功能。此外,文章强调了模型调试过程中需要注意的关键点,如坐标变换、采样频率、滞环宽度等,并分享了一些实用的经验技巧。 适合人群:从事风力发电研究的技术人员、高校相关专业师生、对电力电子控制系统有兴趣的学习者。 使用场景及目标:适用于希望深入了解DFIG运行机制及其控制策略的研究人员和技术开发者。通过构建和仿真该模型,能够更好地掌握DPC的工作原理,优化风力发电系统的性能,提高发电效率和稳定性。 其他说明:文章不仅提供了详细的理论背景介绍,还包括大量实用的操作指南和代码片段,帮助读者快速入门并在实践中不断改进和完善自己的模型。

    COMSOL三维摩擦发电机模拟:不同电极摩擦产生电荷密度对电势与电场分布的影响分析

    内容概要:本文详细介绍了使用COMSOL进行三维摩擦发电机数值模拟的方法和技术要点。首先讨论了几何建模的具体步骤,包括使用布尔运算创建咬合结构以及调整电极尺寸。接下来深入探讨了电荷密度的设定方法,强调了自定义场函数的应用及其灵活性。随后讲解了电场分布的计算,特别指出自适应网格细化的重要性,并展示了不同材料组合对电荷密度和电场分布的影响。此外,文中还提到了一些常见的陷阱,如介电常数设置不当可能导致模型偏差,并提供了相应的解决办法。最后,作者分享了一些实用的经验和技巧,帮助提高模拟的准确性和效率。 适合人群:从事电磁学、材料科学或相关领域的研究人员和工程师,尤其是那些希望深入了解摩擦发电机工作机制的人。 使用场景及目标:适用于需要精确模拟和分析摩擦发电机性能的研究项目。主要目标是通过数值模拟优化电荷密度和电场分布,从而提高摩擦发电机的能量转换效率。 其他说明:文中不仅提供了详细的建模指导,还包括了许多实用的代码片段和注意事项,有助于读者更好地理解和应用所学知识。

    Rust异步批处理超时:Deadline控制.pdf

    文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位,文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常,无任何异常情况,敬请您放心查阅与使用。文档仅供学习参考,请勿用作商业用途。 Rust 以内存安全、零成本抽象和并发高效的特性,重塑编程体验。无需垃圾回收,却能通过所有权与借用检查机制杜绝空指针、数据竞争等隐患。从底层系统开发到 Web 服务构建,从物联网设备到高性能区块链,它凭借出色的性能和可靠性,成为开发者的全能利器。拥抱 Rust,解锁高效、安全编程新境界!

    MATLAB代码:基于双层出清模型的能源集线器参电热综合能源市场模型

    内容概要:本文详细探讨了基于能源集线器参数的电热综合能源市场双层出清模型的实现。首先介绍了综合能源系统及其重要组成部分——能源集线器的功能,即作为电、热等不同能源形式的转换和分配枢纽。接着展示了如何使用MATLAB进行参数初始化、上层优化目标计算以及下层市场出清的潮流计算简化。文中还重点讲解了CPLEX在处理双层模型中的作用,如将MPEC问题转化为MILP并通过KKT条件解决市场博弈问题。此外,通过实例演示了电热价差对储热量的影响,并讨论了蒙特卡洛模拟用于处理风光出力不确定性的方法。最后给出了求解器调用时需要注意的问题和调试技巧。 适合人群:从事能源系统研究的专业人士、研究生及以上学历的学生,尤其是那些对电热综合能源市场、能源集线器、MATLAB编程和优化算法感兴趣的人群。 使用场景及目标:适用于希望深入了解并掌握电热综合能源市场运作机制的研究人员和技术开发者。目标是帮助读者理解如何利用MATLAB和CPLEX构建高效的能源管理系统,从而提高能源利用率,降低运营成本。 其他说明:文中提供了大量实用的MATLAB代码片段,有助于读者快速上手实践。同时提醒读者在实际应用中应注意求解器参数配置等问题,确保模型的有效性和准确性。

    中心锥锥角对涡喷发动机尾喷管气动性能影响规律研究.pdf

    中心锥锥角对涡喷发动机尾喷管气动性能影响规律研究.pdf

    基于MATLAB的综合能源系统低碳优化运行研究:考虑需求响应与碳交易机制的综合模型探究

    内容概要:本文探讨了如何利用MATLAB代码实现综合能源系统在碳交易机制和需求响应下的优化运行。首先介绍了需求响应模型的两种类型:价格型和替代型。价格型需求响应基于价格弹性矩阵,描述了能源价格变动对用户需求的影响;替代型需求响应则关注电能和热能之间的转换。接着讨论了碳交易机制的构建,包括碳排放量的计算和碳排放配额的分配方法。然后提出了综合能源系统的低碳优化运行模型,设定了购能成本、碳交易成本及运维成本之和最小为目标函数,并通过线性规划求解。最后,通过对四种典型场景的验证,展示了模型的有效性。 适合人群:从事综合能源系统研究的技术人员、研究生及以上学历的研究人员。 使用场景及目标:适用于希望深入了解综合能源系统优化运行机制的人群,尤其是希望通过MATLAB代码实现具体模型构建和技术验证的专业人士。目标是在满足多种约束条件下,实现综合能源系统的低碳优化运行,降低运营成本并有效管理碳排放。 阅读建议:由于涉及较多具体的MATLAB代码实现细节,建议读者具备一定的编程基础和相关领域的背景知识,以便更好地理解和应用文中提供的技术和方法。

    基于蚁群算法的双向平滑路径规划算法研究与Matlab实现 通过自主研究对比,实现起始点与地图的自由更换优化路径选择。

    内容概要:本文深入探讨了路径规划算法的研究进展,特别是对经典的蚁群算法进行了多项创新性的改进。作者详细介绍了如何利用Matlab实现蚁群算法的基本框架,并针对路径平滑度不足的问题提出了基于Flod算法的双向平滑度优化方法。此外,还自主研发了一种全新的路径规划算法,能够灵活应对不同的地图环境。通过对多种算法的实际性能对比,展示了改进后的蚁群算法在路径长度和平滑度方面的显著提升。 适合人群:对路径规划算法感兴趣的科研人员、工程师以及高校师生。 使用场景及目标:适用于需要高效、平滑路径规划的应用场合,如机器人导航、物流配送系统等。目标是为用户提供一种更为智能化、高效的路径解决方案。 其他说明:文中提供了详细的代码片段和技术细节,有助于读者理解和复现实验结果。同时,强调了算法在实际应用场景中的表现和潜在价值。

    图书馆管理系统源代码.7z

    图书馆管理系统源代码.7z

    Rust分布式追踪分析:Jaeger查询优化.pdf

    文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位,文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常,无任何异常情况,敬请您放心查阅与使用。文档仅供学习参考,请勿用作商业用途。 Rust 以内存安全、零成本抽象和并发高效的特性,重塑编程体验。无需垃圾回收,却能通过所有权与借用检查机制杜绝空指针、数据竞争等隐患。从底层系统开发到 Web 服务构建,从物联网设备到高性能区块链,它凭借出色的性能和可靠性,成为开发者的全能利器。拥抱 Rust,解锁高效、安全编程新境界!

    5小时掌握Go与ApacheSolr:全文检索优化.pdf

    文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位,文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常,无任何异常情况,敬请您放心查阅与使用。文档仅供学习参考,请勿用作商业用途。 编译闪电般迅速,并发性能卓越,部署轻松简单!Go 语言以极简设计理念和出色工程性能,成为云原生时代的首选编程语言。从 Docker 到 Kubernetes,全球顶尖科技企业都在采用 Go。点击了解 Go 语言的核心优势、实战窍门和未来走向,开启高效编程的全新体验!

    c++-信息解密-代码

    c++-信息解密-代码

    当时侥幸留下来的网站开发代码

    没啥东西

    数字集群通信系统综述.pdf

    数字集群通信系统综述.pdf

    基于谓词逻辑的归结原理研究.pdf

    基于谓词逻辑的归结原理研究.pdf

    Rust内存安全容器:ThinVec优化实践.pdf

    文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位,文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常,无任何异常情况,敬请您放心查阅与使用。文档仅供学习参考,请勿用作商业用途。 Rust 以内存安全、零成本抽象和并发高效的特性,重塑编程体验。无需垃圾回收,却能通过所有权与借用检查机制杜绝空指针、数据竞争等隐患。从底层系统开发到 Web 服务构建,从物联网设备到高性能区块链,它凭借出色的性能和可靠性,成为开发者的全能利器。拥抱 Rust,解锁高效、安全编程新境界!

    基于改进粒子群算法的分布式电源DG定容选址及网损、成本、电压偏差优化研究

    内容概要:本文详细探讨了利用改进粒子群算法(MOPSO)解决分布式电源(DG)在配电网中的选址和定容问题。文中介绍了多目标优化的目标函数构建方法,如网损、投资成本和电压偏差的计算,并展示了如何通过动态惯性权重、随机扰动和拥挤度排序等手段提高算法性能。此外,文章还讨论了帕累托解集的维护和最终解的选择策略,强调了实际应用中的物理可行性和参数调优经验。 适合人群:从事电力系统规划、优化算法研究以及相关领域的工程师和技术人员。 使用场景及目标:适用于需要在配电网中合理配置分布式电源的实际工程项目,旨在降低网损、控制投资成本并维持电压稳定,从而提高电网的整体经济性和稳定性。 其他说明:文中提供了具体的代码实现和实际案例分析,帮助读者更好地理解和应用所介绍的方法。同时,作者指出,尽管算法能够提供多种平衡解,但在实际应用中还需结合具体情况进行选择。

    Dify智能体:AI智能问数.yml

    Dify智能体:AI智能问数.yml

Global site tag (gtag.js) - Google Analytics