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

最新推荐文章于 2024-08-14 18:50:50 发布
最新推荐文章于 2024-08-14 18:50:50 发布
阅读量132 收藏
点赞数
分类专栏： 技术 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_20089/article/details/82608200
版权
<!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>
iteye_20089
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap-3-Tutorial-48---Pager-Aligned-Links:以下视频教程的代码
07-09
Bootstrap 3 是一个广泛使用的前端开发框架，它简化了网页设计和响应式布局的实现。在Bootstrap 3中，Pager组件是一种专为分页设计的工具，常用于展示大量内容时进行页面导航，例如博客文章或产品列表。教程48专注于...
IE11兼容之CSS居中（vertical-align）异常与绝对定位高度继承异常
liixnhai的博客
09-21 562
1、居中异常 vertical-align: middle; 居中失效。 原因： ie11下vertical-align生效，必须满足俩条件： 同级别至少俩vertical-align:middle元素； 必须有一个文本，且不为空文本，字体不为0； 解决: 加同级别元素到2个或者以上，vertical-align:middle； 加文本，不想显示，就加width为0px，overflow为hidden <span>66</span> overflow.
vertical-align的兼容性问题
muzi187的博客
01-25 4002
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之vertical-align-->第八章vertical-align糟糕的兼容性 IE6/IE7 IE8/Chrome/FireFox/... 1、Baseline （1）小图片和文字 （2）大图片和文字 （3）大行高下的大图片和文字 2、Middle （1）小图片和文字 （2）大图片和文字
vertical-align:middle无效的原因以及解决办法
暮雪进化史
05-30 1万+
vertical-align属性只对行内元素有效，对块内元素无效！当display:inline-block;为必要条件的时候，可以适当用table-cell取替、将display属性设置为table-cell，块元素转化为单元格，然后加上vertical-align:middle另一个垂直居中的办法，是当div的高度与行高相同时，即可竖向居中。...
vertical-align：middle 失效解决方法
h_qingyi的博客
12-01 1万+
学姐给我布置作业叫我实现内联元素的垂直居中，我以为很简单，于是找到了vertical-align:middle          给div设置高度后 我对#test设置vertical-align:middle    竟然不能垂直居中，，img也是内联元素，为什么不能垂直居中呢，没想到楼上大三的大佬说加个辅助inline-block的元素才行，因为 vertical-alig
Latex常见公式环境与对齐方式小节
热门推荐
yanxiangtianji的专栏
12-26 30万+
本文将讨论全局与局部的公式对齐方式的调节，并对比各种常见的公式环境的差异（尤其是在对齐方面），介绍多行公式、多公式的编写方式。 针对各种常见环境（尤其是多行公式环境）的差异，对它们分别适用于哪种应用环境提出建议。 全局设置 全局对齐 默认的公式对齐方式是居中对齐。 如果全文要大量使用左对齐方式，可以采用在documentclass或者amsmath包前面加上参数fleqn，这样全局的默认对齐方式就是左对齐了
精确算法matlab代码-field-aligned-current:一个计算地球上场对准电流的程序
05-23
标题中的“精确算法matlab代码-field-aligned-current”指的是一个用于计算地球赤道平面上场对准电流的程序，这是地球物理学领域的一个重要概念。场对准电流，也称为极光电流，是地球磁层中的一种电流系统，它沿着地...
wordvec-aligned-en-zh:对齐的英语和汉语双语单词向量
05-10
wordvec-aligned-zh-zh 对齐的中英文双语单词向量。 import os from utils import read_wordvec if not os . path . exists ( 'wiki.en.align.vec' ): os . system ( 'wget ...
阶乘matlab代码-Aligned-rank-transform:与Matlab对齐的秩变换
05-28
阶乘matlab代码对齐秩变换 与Matlab对齐的秩变换 编写此函数以使用Matlab进行对齐的秩变换 对于尾部较重的数据，此函数可用于获取对齐的秩转换后的数据并实现方差分析和混合效应模型。这是当数据具有非正态分布时...
latex公式常见问题：居中与左对齐，多行公式左对齐，上下标
ivvrr的博客
07-14 7万+
latex公式常见问题：公式左对齐，去掉公式编号，公式内等号对齐，正上下方角标
\latex 居中与缩进
lishoubox的专栏
02-26 10万+
\latex  居中与缩进 居中文本 环境：\begin{center} 第一行\\第二行\\...第n行 \end{center}.可以用\\[长度]来插入可以省略的额外行间距。在一个环境内部，可以用命令\centering来居中后接文本，同样用\\作为行分隔符。单独的一行文本可以把它作为tex命令\centerline{文本}的参数来居中排列。 单边调整 环境:\beg
LaTeX技巧207：使用align环境输入多行公式的技巧
weixin_34146986的博客
06-14 1829
align是输入多行公式中最好用的环境，仅仅是个人浅见，因为他的对齐非常灵活，如果大家需要非常灵巧的对齐方式的多行公式，建议使用align环境，对应的也还有align*和aligned等等类似的环境，这里不再详述。下文提供代码，尽展其风姿绰约。演示效果图： 演示代码：\documentclass{article}\pagestyle{empty}\setcounter{page}{6}\setle...
Latex中使用align来对齐多行公式的排版技巧
网海水手
10-29 17万+
示例: \documentclass{article} \pagestyle{empty} \setcounter{page}{6} \setlength\textwidth{266.0pt} \usepackage{CJK} \usepackage{amsmath} \begin{CJK}{GBK}{song} \begin{document} \begin{align} (a +
Latex常见公式环境与对齐方式小节（重修版）
yanxiangtianji的专栏
01-28 6万+
本文将讨论全局与局部的公式对齐方式的调节，并对比各种常见的公式环境的差异（尤其是在对齐方面），介绍多行公式、多公式的编写方式。 针对各种常见环境（尤其是多行公式环境）的差异，对它们分别适用于哪种应用环境提出建议。本文是在前文的基础上，采用Markdown重置的，调整了部分语言和格式，内容没有核心差异。
“从零开始的HTML 表格”——WEB开发系列09
一条晒干的咸鱼的博客
08-14 808
HTML 表格是一种用于在网页上组织和显示信息的结构性元素，它能够将数据以行和列的形式呈现，帮助用户更清晰地理解数据关系。表格在展示统计数据、产品列表、日程安排等方面非常实用。
掌握Golang的html/template：打造动态网页的秘籍
最新发布
2401_85812053的博客
08-14 336
通过本文的介绍，你应该对Golang的包有了基本的了解。它是一个强大而灵活的工具，可以帮助你安全、高效地生成动态HTML内容。掌握它，你将能够在Web开发中更加游刃有余。通过上述步骤，你可以开始使用来构建你的Web应用了。记住，实践是学习的最佳方式，所以不要犹豫，开始编写你自己的模板吧！
html常用标签
qq_65046523的博客
08-10 260
dd dt注意事项同无序列表。
前端（HTML + CSS）小兔鲜儿项目（仿）
li3123537691的博客
08-09 571
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码。
High speed: % mafft in > out % mafft --retree 1 in > out (fast) High accuracy (for <~200 sequences x <~2,000 aa/nt): % mafft --maxiterate 1000 --localpair in > out (% linsi in > out is also ok) % mafft --maxiterate 1000 --genafpair in > out (% einsi in > out) % mafft --maxiterate 1000 --globalpair in > out (% ginsi in > out) If unsure which option to use: % mafft --auto in > out --op # : Gap opening penalty, default: 1.53 --ep # : Offset (works like gap extension penalty), default: 0.0 --maxiterate # : Maximum number of iterative refinement, default: 0 --clustalout : Output: clustal format, default: fasta --reorder : Outorder: aligned, default: input order --quiet : Do not report progress --thread # : Number of threads (if unsure, --thread -1)
06-10
这是mafft的一些常用命令和选项，用于在不同情况下生成高速或高精度的序列比对结果。以下是各个选项的含义： 1. High speed: 这是用于生成快速比对结果的选项。使用“mafft in > out”或“mafft --retree 1 in > out”命令可以获得快速比对结果。 2. High accuracy: 这是用于生成高精度比对结果的选项。使用“mafft --maxiterate 1000 --localpair in > out”、“mafft --maxiterate 1000 --genafpair in > out”或“mafft --maxiterate 1000 --globalpair in > out”命令可以获得高精度比对结果。 3. If unsure which option to use: 如果不确定应该使用哪个选项，则可以使用“mafft --auto in > out”命令。mafft将根据序列的数量和长度自动选择适当的比对选项。 4. --op #: Gap opening penalty。这是一个用于指定序列中插入空位（gap）的惩罚系数，默认值为1.53。 5. --ep #: Offset。这个选项类似于gap extension penalty，用于指定插入空位时的额外惩罚， 默认值为0.0。 6. --maxiterate #: Maximum number of iterative refinement。这是指定迭代次数的选项，用于控制算法的收敛速度，默认值为0，表示不进行迭代。 7. --clustalout: 输出clustal格式比对结果，默认输出FASTA格式。 8. --reorder: 指定输出结果的序列顺序，可以选择“aligned”或“input order”。 9. --quiet: 不显示比对进度信息。 10. --thread #: 指定线程数，如果不确定，请使用“--thread -1”选项，mafft将自动选择最佳线程数。 这些选项的具体用法和参数取值可以在mafft的官方文档中找到。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值