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

最新推荐文章于 2025-12-04 17:59:42 发布
原创 最新推荐文章于 2025-12-04 17:59:42 发布 · 195 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

本文介绍了一种兼容IE6/8/FF浏览器的垂直居中布局方法，通过设置一个关键的SPAN元素作为参照物，使后续的内联元素能够实现精确的垂直对齐。该方案灵活地支持不同高度的调整，并详细说明了各元素的对齐逻辑。
<!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>
IE11兼容之CSS居中（vertical-align）异常与绝对定位高度继承异常
liixnhai的博客
09-21 627
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 4155
慕课学习-->前端开发-->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 31万+
本文将讨论全局与局部的公式对齐方式的调节，并对比各种常见的公式环境的差异（尤其是在对齐方面），介绍多行公式、多公式的编写方式。 针对各种常见环境（尤其是多行公式环境）的差异，对它们分别适用于哪种应用环境提出建议。 全局设置 全局对齐 默认的公式对齐方式是居中对齐。 如果全文要大量使用左对齐方式，可以采用在documentclass或者amsmath包前面加上参数fleqn，这样全局的默认对齐方式就是左对齐了
垂直居中布局兼容IE6/8及Firefox的实现方案
标题“垂直居中布局 Vertical-aligned 应用测试：兼容IE6/8/FF”明确指出了该文件的核心内容：探讨并实现一种能够在多种主流浏览器（包括Internet Explorer 6、8以及Firefox）中稳定运行的CSS垂直居中方案。...
# gui_main.py - 左上角标题版 (Top-Left Aligned | Light Gray Industrial UI) import sys from PyQt5.QtWidgets import ( QApplication, QWidget, QVBoxLayout, QLabel, QLineEdit, QPushButton, QTextEdit, QMessageBox ) from PyQt5.QtCore import Qt, QThread, pyqtSignal from PyQt5.QtGui import QFont # 导入逻辑模块 from image_open import show_image_fullscreen from image_path import search_multiple_paths # 双路径配置 BASE_PATHS = [ r'\\172.30.6.203\backup\AOI_C\PASS_PIC', r'\\172.30.6.202\d\backup\AOI_C\PASS_PIC' ] # 全局字体 FONT_REGULAR = QFont("Consolas", 16) FONT_BOLD = QFont("Consolas", 18, QFont.Bold) class SearchWorker(QThread): """后台搜索线程""" finished_signal = pyqtSignal(str, str) # image_path, log error_signal = pyqtSignal(str) def __init__(self, line, by90, mo, base_paths): super().__init__() self.line = line self.by90 = by90 self.mo = mo self.base_paths = base_paths def run(self): import time start_time = time.time() try: result, detail = search_multiple_paths(self.line, self.by90, self.mo, self.base_paths) end_time = time.time() duration = end_time - start_time if result: self.finished_signal.emit( result, f"✅ 找到图片，耗时 <b>{duration:.2f}s</b><br><code>{result}</code>" ) else: self.error_signal.emit( f"❌ 未找到，耗时 <b>{duration:.2f}s</b><br>原因：<br><code>{detail}</code>" ) except Exception as e: duration = time.time() - start_time self.error_signal.emit(f"⚠️ 异常，耗时 <b>{duration:.2f}s</b><br>错误：<br><code>{str(e)}</code>") class AOIImageViewer(QWidget): def __init__(self): super().__init__() self.setWindowTitle("AOI 图片查看") self.resize(800, 600) self.setFont(FONT_REGULAR) self.setStyleSheet(self.get_style_sheet()) self.init_ui() def get_style_sheet(self): return """ QWidget { background-color: #f0f0f0; color: #222222; font-family: 'Consolas', 'Courier New', monospace; } QLabel { color: #444444; } QLineEdit { background-color: #ffffff; color: #000000; border: 2px solid #aaaaaa; padding: 10px; font-size: 18pt; selection-background-color: #007ACC; selection-color: #ffffff; } QLineEdit:focus { border-color: #007ACC; background-color: #fffffe; } QPushButton { background-color: #e0e0e0; color: #000000; border: 2px solid #888888; padding: 12px; font-size: 18pt; font-weight: bold; text-align: center; } QPushButton:hover { background-color: #d0d0d0; border-color: #666666; } QPushButton:pressed { background-color: #bbbbbb; border-color: #444444; } QPushButton:disabled { background-color: #f8f8f8; color: #888888; border-color: #cccccc; } QTextEdit { background-color: #ffffff; color: #111111; border: 1px solid #cccccc; padding: 10px; font-family: 'Consolas', monospace; font-size: 12pt; } QScrollBar:vertical { width: 10px; } QScrollBar::handle:vertical { background: #c0c0c0; min-height: 20px; border-radius: 5px; } QScrollBar::handle:vertical:hover { background: #a0a0a0; } """ def init_ui(self): layout = QVBoxLayout() layout.setSpacing(8) layout.setContentsMargins(10, 10, 10, 10) # === 标题区 - 左上角对齐 === title = QLabel("AOI 图片快速查看") title.setFont(FONT_BOLD) title.setStyleSheet("color: #000000; margin-bottom: 4px;") layout.addWidget(title, alignment=Qt.AlignLeft) # 👈 左对齐 desc = QLabel("输入 SSN 编号自动查找并显示图片") desc.setStyleSheet("font-size: 14pt; color: #555555;") layout.addWidget(desc, alignment=Qt.AlignLeft) # 👈 左对齐 # 添加一点间距 layout.addSpacing(5) # === 输入框 === self.ssn_input = QLineEdit() self.ssn_input.setPlaceholderText("例：BN14ABC12345") self.ssn_input.returnPressed.connect(self.on_search_clicked) self.ssn_input.setClearButtonEnabled(True) layout.addWidget(self.ssn_input) # === 查询按钮 === self.search_btn = QPushButton("🔍 开始查询 (Enter)") self.search_btn.setMinimumHeight(60) self.search_btn.clicked.connect(self.on_search_clicked) layout.addWidget(self.search_btn) # === 日志区域 === self.log_area = QTextEdit() self.log_area.setReadOnly(True) self.log_area.setMaximumHeight(200) self.log_area.append('<span style="color:#666666;">💡 输入 SSN 后按回车或点击【开始查询】</span>') layout.addWidget(self.log_area) self.setLayout(layout) # 自动聚焦 self.ssn_input.setFocus() def on_search_clicked(self): ssn = self.ssn_input.text().strip() if not ssn: QMessageBox.warning(self, "⚠️", "请输入 SSN！") return # 固定参数（替换为你的真实解析逻辑） line = 'BN14' by90 = '90N1JR1007G0' mo = '26272758' # 清空日志 self.log_area.clear() self.log_area.append(f"📌 参数: <br>Line：{line}</br><br> 90：{by90}</br><br>MO：{mo}</br>") # 禁用按钮 self.search_btn.setEnabled(False) self.search_btn.setText("⏳ 查询中...") # 启动线程 self.worker = SearchWorker(line, by90, mo, BASE_PATHS) self.worker.finished_signal.connect(self.on_search_success) self.worker.error_signal.connect(self.on_search_error) self.worker.start() def on_search_success(self, image_path, log_msg): self.log_area.append(log_msg) self.search_btn.setEnabled(True) self.search_btn.setText("🔍 开始查询 (Enter)") # 直接全屏显示 try: show_image_fullscreen(image_path, duration=10) except Exception as e: QMessageBox.critical(self, "❌ 显示失败", f"无法打开图片：\n{str(e)}") def on_search_error(self, error_msg): self.log_area.append(f'<span style="color:#FF4444;">{error_msg}</span>') self.search_btn.setEnabled(True) self.search_btn.setText("🔍 开始查询 (Enter)") # ============================= # 🚀 主程序入口 # ============================= if __name__ == "__main__": app = QApplication(sys.argv) app.setStyle("Fusion") # Fusion 支持自定义样式最佳 window = AOIImageViewer() window.show() sys.exit(app.exec_()) 以上完整代碼請幫忙逐行注釋
11-16
# gui_main.py - 左上角标题版 (Top-Left Aligned | Light Gray Industrial UI) # 文件说明：主界面程序，实现 AOI 图片快速查看功能 # 使用 PyQt5 构建 GUI，支持输入 SSN 编号自动查找并全屏显示对应图片 import ...
使用左上角顯示的方式字體AOI 图片快速查看，输入 SSN 编号自动查找并显示图片不要居中顯示，
11-16
我们现在将标题从 **居中显示** 改为 **左上角对齐**，符合工业软件常见的布局风格（如工控 HMI、MES 系统等），更加专业、简洁、实用。 --- ## ✅ 修改目标 | 调整项 | 原来 | 现在 | |--------|------|------| ...
javascript支持带样式的excel导出库
过客2019
04-19 749
之前一直使用node-xlsx这个来生成excel文件。大多数的情况下，这个完全胜任。前端时间，要求输出合并单元格，这个支持，然后要求居中，就嗝屁了~。没有办法，只好去找了。最后找到一个xlsx-js-style，符合要求，与node-xlsx一样，都是基于xlsx的库。但是我的代码都是使用node-xlsx的，批量替换会改很多代码。于是，我fork了node-xlsx，然后用xlsx-js-style替换了xlsx，再把xlsx-js-style全部导出，设置单元的时候，这样就可以用代码提示，不用盳猜了。
latex公式常见问题：居中与左对齐，多行公式左对齐，上下标
ivvrr的博客
07-14 10万+
latex公式常见问题：公式左对齐，去掉公式编号，公式内等号对齐，正上下方角标
\latex 居中与缩进
lishoubox的专栏
02-26 10万+
\latex  居中与缩进 居中文本 环境：\begin{center} 第一行\\第二行\\...第n行 \end{center}.可以用\\[长度]来插入可以省略的额外行间距。在一个环境内部，可以用命令\centering来居中后接文本，同样用\\作为行分隔符。单独的一行文本可以把它作为tex命令\centerline{文本}的参数来居中排列。 单边调整 环境:\beg
Latex常见公式环境与对齐方式小节（重修版）
yanxiangtianji的专栏
01-28 6万+
本文将讨论全局与局部的公式对齐方式的调节，并对比各种常见的公式环境的差异（尤其是在对齐方面），介绍多行公式、多公式的编写方式。 针对各种常见环境（尤其是多行公式环境）的差异，对它们分别适用于哪种应用环境提出建议。本文是在前文的基础上，采用Markdown重置的，调整了部分语言和格式，内容没有核心差异。
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技巧207：使用align环境输入多行公式的技巧
weixin_34146986的博客
06-14 1928
align是输入多行公式中最好用的环境，仅仅是个人浅见，因为他的对齐非常灵活，如果大家需要非常灵巧的对齐方式的多行公式，建议使用align环境，对应的也还有align*和aligned等等类似的环境，这里不再详述。下文提供代码，尽展其风姿绰约。演示效果图： 演示代码：\documentclass{article}\pagestyle{empty}\setcounter{page}{6}\setle...
html css js网页制作成品——娃娃html+css+js 4页附源码
卡拉米
12-01 73
本文介绍了一个关于中国篆刻艺术的静态网站设计与实现方案。网站采用HTML5+CSS3技术构建，包含首页、关于篆刻、作品展示、历史渊源和联系我们等页面模块。文章详细说明了网站布局结构、程序语言选择、素材处理方法以及文件组织方式，并提供了核心HTML代码示例。网站设计兼容主流浏览器，适合修改为各类主题展示网站。作者还分享了编程学习建议，推荐初学者通过刷题巩固基础，并提供了获取更多前端开发资源的渠道。该网站可作为大学生毕业设计或期末作业的参考模板。
HTML应用指南：利用POST请求获取全国极氪门店位置信息
weixin_45812624的博客
12-03 655
本篇文章介绍了通过程序化方式采集并分析极氪全国门店数据的完整流程。基于对官网接口的解析，利用 Python 自动请求市级行政区编码，并批量调用门店查询接口，高效获取包含门店名称、地址、高德经纬度、营业时间及开业日期等字段的结构化数据。针对地理坐标，文章对高德（GCJ-02）坐标系进行了标准化转换，确保后续在地图平台上的精准可视化；同时将原始时间戳统一处理为标准日期格式，支撑时间维度分析。在此基础上，揭示出极氪门店“核心城市群密集布局、区域中心精准覆盖”的空间策略。
使用 HTML + JavaScript 实现手写签名功能
最新发布
QQ26843500的博客
12-04 551
本文介绍了一个基于HTML5 Canvas实现的手写签名网页应用。该应用主要功能包括： 提供米字格背景和范字（"海纳百川"）作为书写参考 支持鼠标和触摸屏两种书写方式 包含清空画布和下载签名图片两个功能按钮 技术实现上使用双Canvas叠加方案，底层Canvas绘制米字格和范字作为引导层，上层Canvas实现手写功能。通过JavaScript事件监听实现笔迹追踪，采用贝塞尔曲线平滑处理书写轨迹。响应式设计适配不同设备，并提供PNG格式的签名下载功能。整体界面简洁，采用蓝色标题栏和白色书写
【HTML Living Standard 01】HTML基础概述
风高秋月白，雨霁晚霞红
12-01 934
HTML-01 基础概念相关。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值