微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

JavaScript和CSS通过expression实现Table居中显示_javascript技巧

php中文网
发布： 2016-05-16 17:30:51
原创
1489人浏览过

上篇博客说的是将div设置为居中显示，今天来分享一下如何将表格居中的显示。至于居中的原理就不说了，可以看一下我的上篇博客，这次没有使用window的两个事件，而是使用一个叫expression的函数。现在多数的浏览器都支持这个函数。在写上一篇博客的时候，我脑里想能不能把计算后的值赋给css的left和top属性呢？后来查阅资料找到了这个函数。这个函数用来把CSS属性和JavaScript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义的属性。就是说CSS属性后面可以是一段JavaScript表达式，CSS属性的值等于JavaScript的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

好了先看一下居中的源码吧！
JavaScript和CSS通过expression实现Table居中显示_javascript技巧 
可以很清楚的看到expression函数内写的值是那个总结的公式。即文档的高宽减去自身的高宽，然后除以2就是top和left的值了。将这段代码放到style属性里就居中了。如图所示：
JavaScript和CSS通过expression实现Table居中显示_javascript技巧 
这样就可以居中显示了。
会不会想把这段代码写到css里去呢，答案是可以的，这样之后代码就变成了如下这个样子：
JavaScript和CSS通过expression实现Table居中显示_javascript技巧 
这样就可以通过CSS和JavaScript使table居中的显示了，这样做登录页面的时候就好看了。很简单吧！

相关标签：
css

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：Jquery网页出现的乱码问题的三种解决方法_jquery 下一篇：jquery异步跨域访问代码_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
Google Drive API：使用服务账户进行无用户认证访问指南 本教程旨在解决在Wix等无用户交互环境中，通过GoogleDriveAPI获取数据时，使用刷新令牌认证失败的问题。文章将详细介绍如何利用Google服务账户进行无缝、安全的服务器到服务器认证，涵盖服务账户的创建、权限配置以及在JavaScript环境中（如WixVelo后端）获取访问令牌并调用DriveAPI的完整实现方案。
2025-11-30 09:40:25
311
React应用中异步数据加载与渲染的健壮性实践：告别页面刷新崩溃 本教程针对React应用在页面刷新时因异步数据未加载完成导致崩溃的问题，深入探讨了条件渲染的必要性。我们将从常见的逻辑AND运算符方案入手，逐步引入更专业的解决方案，包括优化初始状态、管理加载和错误状态、利用可选链操作符以及构建健壮的条件渲染逻辑，旨在帮助开发者构建稳定、用户体验友好的React应用。
2025-11-30 09:32:13
175
React中onClick事件处理器的两种常见写法及其性能考量 在React中，处理onClick事件时，开发者常会遇到两种写法：直接引用函数和使用匿名函数包装。本文将深入探讨这两种方法的机制、各自的适用场景以及它们在性能上的细微差异。理解这些差异有助于编写更高效、更可维护的React组件。
2025-11-30 09:16:12
860
JavaScript：从点分隔字符串构建嵌套JSON结构 本教程将指导您如何使用JavaScript将一个点分隔的键字符串（如global.fontsize.bodyscale）和一个当前值，高效地转换为一个深度嵌套的JSON对象（如{global:{fontsize:{bodyscale:{value:currValue}}}}）。我们将重点介绍Array.prototype.reduceRight()方法的巧妙应用，通过从内到外构建对象结构，实现此功能，提供清晰的代码示例和详细解释。
2025-11-30 08:36:17
887
JavaScript函数式编程_Transducer Transducer是转换reduction过程的高阶函数，通过组合map、filter等操作为单一遍历流程，避免中间数组生成，提升性能。它返回接收reducer并返回增强reducer的函数，如map转换单元值，filter控制流入，再通过compose组合多个转换逻辑，最终在reduce中一次性执行，适用于数组、Observable等支持reduce的数据结构，实现高效、可复用、可组合的数据处理pipeline。
2025-11-30 08:04:02
740
如何正确在Angular父组件中更新子组件的Checkbox状态 本文深入探讨了在Angular应用中，当子组件的Checkbox状态需要根据父组件的异步操作（如API调用）结果进行更新时，可能遇到的常见问题及解决方案。我们将学习如何通过父子组件间的正确通信机制，结合Angular的变更检测，确保Checkbox状态在异步操作成功后得到准确且响应式的更新，避免直接@Input绑定失效的情况。
2025-11-30 08:01:17
942
JavaScript表单验证_复杂业务规则处理 表单验证需拆分逻辑以提升可维护性，将复杂规则封装为独立函数；2.可通过函数校验日期范围、动态必填项及金额总和限制；3.组合调用验证函数确保数据质量与用户体验。
2025-11-30 00:33:12
146
JavaScript日期处理_时区转换算法 JavaScript中Date对象存储UTC时间戳但显示本地时区，时区转换需理解其UTC本质。通过getTime()获取时间戳并手动加偏移可转时区，但推荐使用Intl.DateTimeFormat结合timeZone选项（如‘Asia/Shanghai’）进行准确格式化，避免构造函数解析错误。处理用户输入时应拼接时区标识或用国际化API，复杂场景建议采用moment-timezone或date-fns-tz等库以确保正确性。
2025-11-29 21:45:07
396
标签模板字面量_javascript模板引擎 标签模板字面量通过函数处理模板字符串，可实现如HTML转义等安全操作。
2025-11-29 21:44:02
983
JavaScript算法优化_递归与迭代 递归代码简洁但易栈溢出且效率低，迭代性能优但逻辑复杂；应根据问题选择并用记忆化或尾递归优化递归。
2025-11-29 21:44:02
389
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部