如何使屏幕的表格居中(垂直和水平)

2023-11-23

我有这些代码块:

<table border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>

我想在屏幕中央显示我的表格(垂直和水平)。

这是一个演示.

我怎样才能做到这一点?


水平居中很容易。您只需将两个边距设置为“自动”:

table {
  margin-left: auto;
  margin-right: auto;
}

垂直居中通常是通过将父元素显示类型设置为table-cell并使用vertical-align财产。假设你有一个<div class="wrapper">在你的桌子周围:

.wrapper {
  display: table-cell;
  vertical-align: middle;
}

更详细的信息可以在http://www.w3.org/Style/Examples/007/center

如果您需要旧版本 Internet Explorer 的支持(我不知道这个奇怪且很少使用的浏览器的哪个版本可以工作;-))那么你可能想要搜索网页欲了解更多信息,例如:http://www.jakpsatweb.cz/css/css-vertical-center-solution.html(只是第一次点击,其中似乎提到了IE)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使屏幕的表格居中(垂直和水平) 的相关文章

  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • 使用溢出时无法隐藏滚动条:auto

    我有这个CSS div background color red position relative height 414px overflow auto width 902px margin 0px auto 我尝试过overflow y
  • c# 如何生成锦标赛括号 HTML 表

    所以我已经被这个问题困扰了三个星期 但我一生都无法弄清楚 我想做的是使用表格获得这种输出 演示 http www esl world net masters season6 hanover sc2 playoffs rankings htt
  • 通过 jQuery 从输入类型=“文件”多个中删除文件

    我在使用 PHP 和 jQuery 上传文件时遇到问题 表单可以一次上传多个图像 这些图像可以在滑块中预览 表单还包含两个字段标题和描述 滑块通过 jQuery 工作 当用户通过单击选择文件来选择多个图像时
  • xpath:选择中断标签之前和之后的文本节点

    考虑以下因素 混合 br and br text1 br text2 br text3 br text4 br text5 如何找到每个文本节点 我正在考虑符合 br 标签之前或之后的条件的东西 但不确定是否 br and br 在 xpa
  • iOS Safari Mobile 禁用上一个和下一个选择输入

    上周五我发现了关于此问题的类似问题 但似乎无法再次找到它 如果有人能指出我正确的方向 那就太好了 本质上我在一个页面上有多个选择菜单 第一个在加载时填充 第二个在第一个选择时填充 够简单的 但是 在 iOS 设备中 当您点击选择元素时 它会
  • 让登录更安全

    我已使用此代码进行管理员登录 仅当用户输入正确的用户名和密码时才应打开loginhome php 但后来我意识到这根本不安全 任何人都可以直接访问 mywebsite loginhome php 而无需登录 注销后 可以使用后退按钮打开 l
  • 数字和小数的输入掩码

    在测试我的程序后 我发现了以下错误 我在 sqlserver 中的表包含 价格数字 6 2 我的程序的用户输入价格 555 00 就很好了 但是当他输入 555555 时 这是错误的 所以我需要指定掩码 其中尾数是可选的 0 到 999 小
  • 使用滤镜将css3灰色图像转为蓝色?

    我正在尝试将灰色图像变为更蓝色的色调 真的不知道如何为此设置滤镜或是否可能 该图像只有一种颜色 cacaca 其余部分透明 我正在尝试使用相同的图像进行一些叠加 以便它仅突出显示那些彩色部分而不是透明区域 一直在尝试其中的一些 但没有取得多
  • 为什么在 HTML 中使用 onClick() 是一种不好的做法?

    我多次听说使用 JavaScript 事件 例如onClick 在 HTML 中是一种不好的做法 因为它不利于语义 我想知道以下代码有什么缺点以及如何修复 a href link a 你可能正在谈论不引人注目的 JavaScript htt
  • 当 URL 包含片段时,iframe 会导致父元素在 Google Chrome 上向上滚动

    在 Google Chrome 37 0 2062 122 OSX Windows 上 具有包含片段的 URL 的 iframe 会导致父元素向上滚动 它只发生在 Chrome 中 在 Safari 和 Firefox 中测试 这是显示问题
  • 在 javascript/jquery 中将光标更改为等待

    当调用函数时 如何让光标更改为此加载图标以及如何将其更改回 javascript jquery 中的普通光标 在你的 jQuery 中使用 body css cursor progress 然后又恢复正常 body css cursor d
  • 如何更改bootstrap中form-control弹出窗口中必填字段的默认消息?

  • 如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录?

    因此 就我而言 我使用 Iframe 将 Grafana 附加到我的页面 这为我提供了漂亮且易于使用的图表 可以注意到 每次在图表上进行放大或缩小 使用鼠标单击 交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • 定时器与 setTimeout

    flash utils setTimeout 的文档状态 不使用此方法 请考虑 创建一个 Timer 对象 其中 指定间隔 使用 1 作为 重复计数参数 设置 计时器仅运行一次 有谁知道这样做是否有 显着 优势 当您只需要延迟 1 个调用时
  • Objective C:如何使用HTTP POST上传图像和文本?

    我已经成功创建了两种不同的方法 每种方法都可以上传图像或文本 但我在编写可以同时发布文本和图像的方法时遇到问题 这是我的新方法 效果很好 感谢 sgosha void upload NSString urlString http www e
  • 如何计算两个(或更多)矩形的并集多边形

    例如 我们有两个矩形 它们重叠 我想得到它们的并集的确切范围 计算这个的好方法是什么 这是两个重叠的矩形 假设顶点绳都是已知的 如何计算其联合多边形顶点的线 如果我有两个以上的矩形怎么办 存在一个线扫描算法计算 n 个矩形的并集面积 有关算
  • 从 pandas 数据框中的字符串列中删除 b''

    我有一个取自 SDSS 数据库的数据框 示例数据在这里 我想从中删除字符 b data class 我试过 data class data class replace b 但我没有得到结果 您正在使用字节字符串 你可能会考虑str deco
  • 您能推荐一个商业用途的地图API吗?

    我的要求是能够打印许多节点之间的路线 能够查询节点之间的距离以进行最佳可能的路线计算 并在地图上显示自定义图标 就道路和街道而言 拥有准确的地图源非常重要 我调查了开放的街道地图 但恐怕它可能不完全准确 任何有关商业库 API 的建议将不胜
  • 带参数的 jQuery 绑定和取消绑定事件

    我正在尝试将事件绑定到textbox包含参数 下面的 keep 看起来似乎应该这样做 但每次页面加载时 它都会被执行 jQuery function jQuery textbox bind click EventWithParam para
  • 拉伸背景图片CSS?

    td class style1 align center height 35 div style width 230px a class link span span a div td
  • 用于语义分割的 ImageDataGenerator

    我正在尝试使用 Keras 进行语义分割 并且在尝试加载图像时出现此错误flow from directory method Found 0 images belonging to 0 classes Found 0 images belo
  • 连接两条线段

    给定两条 2D 线段 A 和 B 如何计算连接 A 和 B 的最短 2D 线段 C 的长度 考虑两条线段 A 和 B 分别由两个点表示 线A由A1 x y A2 x y 表示 线 B 由 B1 x y B2 x y 表示 首先使用此算法检查
  • 如何迭代 JSON 结构? [复制]

    这个问题在这里已经有答案了 我有以下 JSON 结构 id 10 class child of 9 id 11 classd child of 10 如何使用 JavaScript 迭代它 var arr id 10 class child
  • 为什么 lambda 中的短路不起作用?

    为什么 linq 仍然尝试检查第二个表达式 Where t gt String IsNullOrEmpty someNullString t SomeProperty gt Convert ToDecimal someNullstring
  • 如何使用 Spring Boot 和嵌入式 Tomcat 禁用 TLSv1.0?

    我想用 spring boot 版本 1 3 3 停用 TLS 1 0 但如果 application yml 如下所示 它不起作用 ssl protocol TLSv1 2 key store E key server jks key s
  • 用于批量插入的触发触发器

    ALTER TRIGGER dbo TR O SALESMAN INS ON dbo O SALESMAN AFTER INSERT AS BEGIN SET NOCOUNT ON added to prevent extra result
  • 我应该扩展 ArrayList 以添加不为 null 的属性吗?

    我想将对象集合添加到 arrayList 前提是特定属性不为空 我正在考虑扩展 ArrayList 并在子类中实现检查 一种替代方法是在将属性放入 Arraylist 之前检查该属性 但这意味着 如果我需要根据逻辑将对象添加到 arrayl
  • 什么是 UIViewController

    我知道什么是UIView是但不是UIViewController 我只是想知道我可以用它做什么 以及它与UIView 基本上你需要知道什么是模型 视图 控制器架构在软件工程领域 UIView对应于该架构的视图并且UIViewControll
  • 带有手动词法分析器的 ANTLR 解析器

    我正在将基于 C 的编程语言编译器从手动词法分析器 解析器迁移到 Antlr Antlr 一直让我头疼 因为它通常mostly可以 但有些小部分却不能 而且解决起来非常痛苦 我发现我的大部分头痛都是由 Antlr 的词法分析器部分引起的 而
  • Twisted 的 Python Jabber/XMPP 客户端库 [关闭]

    Closed 这个问题不符合堆栈溢出指南 目前不接受答案 我正在寻找一个使用 Twisted 框架编写 Jabber XMPP 客户端的 Python 库 Wokkel是你最好的选择 它是对 Twisted 内置的核心 Twisted Wo
  • document.body.scrollHeight 在 firefox/chrome 中产生两个不同的结果

    我试图访问整个页面的高度 包括滚动 在 Chrome 中 document body scrollHeight 就是这样做的 在 Firefox 中 这不起作用 Firefox 中的等效项是什么 肯定开始使用 jquery 访问 docum
  • 如何在ie11上查看webp格式

    有没有办法在 IE11 上查看 webp 图像格式 或者可以在此浏览器上使用 javascript 代码将其转换为其他格式 我尝试了 图片 元素 但似乎它不能像 Chrome 62 那样工作 This也是一个非常易于使用且有效的polyfi
  • 如何使屏幕的表格居中(垂直和水平)

    我有这些代码块 table border 1px tr td my content td tr table 我想在屏幕中央显示我的表格 垂直和水平 这是一个演示 我怎样才能做到这一点 水平居中很容易 您只需将两个边距设置为 自动 table