当前位置: 首页 > news >正文

CSS-实例-div 水平居中 垂直靠上

1 需求


2 语法


3 示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格水平居中、垂直靠上示例</title><style>/* 设置包含表格的div样式,使其内容水平居中 */.container {text-align: center; /* 用于行内或内联元素,但不影响块级元素如表格 */display: flex;justify-content: center; /* 使用flex布局使块级元素居中 */align-items: flex-start; /* 垂直靠上 */height: 100vh; /* 设置容器高度为视口高度,以便看到垂直靠上的效果 */margin: 0; /* 移除默认边距 */}/* 表格样式 */table {border-collapse: collapse; /* 合并边框 */margin: 0 auto; /* 上下边距为0,左右自动,使表格在水平方向上居中 */}th, td {border: 1px solid black; /* 添加边框以便查看 */padding: 8px; /* 添加内边距 */}</style>
</head>
<body><div class="container"><table><caption>标题</caption><thead><tr><th>表头1</th><th>表头2</th></tr></thead><tbody><tr><td>数据1</td><td>数据2</td></tr><!-- 其他行和列... --></tbody></table>
</div></body>
</html>


4 参考资料

http://www.lryc.cn/news/391088.html

相关文章:

  • 数据分析入门指南:从基础概念到实际应用(一)
  • ArcGIS Pro三维空间分析、专题制图、遥感制图全流程系统教学
  • Redis 7.x 系列【17】四种持久化策略
  • 开发经验:go切片的继承
  • PyQt5事件机制解析:从原理到实战一网打尽!
  • GraphQL与RESTful API的区别和优势
  • 关于 Qt4Qt5迁移至Qt6出现QDesktopWidget和QApplication::desktop()删除后兼容Qt6 的解决方法
  • 【HarmonyOS NEXT】鸿蒙Socket 连接
  • 1978Springboot在线维修预约服务应用系统idea开发mysql数据库web结构java编程计算机网页源码maven项目
  • 【vue】实现自动轮播+滚轮控制
  • 鸿翼FEX文件安全交换系统,打造安全高效的文件摆渡“绿色通道”
  • 苹果电脑虚拟机运行Windows Mac环境安装Win PD19虚拟机 parallels desktop19虚拟机安装教程免费密钥激活
  • 昇思25天学习打卡营第11天|基于MindSpore通过GPT实现情感分类
  • 【Python】变量与基本数据类型
  • Unity按键表大全
  • 第一周java。2
  • Arduino - Keypad 键盘
  • 国产芯片方案/蓝牙咖啡电子秤方案研发
  • reactjs18 中使用@reduxjs/toolkit同步异步数据的使用
  • 剧本杀小程序:助力商家发展,提高游戏体验
  • pikachu靶场 利用Rce上传一句话木马案例(工具:中国蚁剑)
  • CenterOS7安装java
  • react 重新加载子组件
  • 从零开始使用WordPress搭建个人网站并一键发布公网详细教程
  • 浅谈chrome引擎
  • 【常用知识点-Java】创建文件夹
  • 【JavaScript脚本宇宙】颜色处理神器大比拼:哪款JavaScript库最适合你?
  • 怎么录制电脑内部声音?好用的录音软件分享,看这篇就够了!
  • ios CCNSDate.m
  • Windows系统安装SSH服务结合内网穿透配置公网地址远程ssh连接