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 参考资料

相关推荐
土豆125017 分钟前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css
kooboo china.2 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
我爱吃朱肉6 小时前
纯HTMLCSS静态网站——元神
css·html
格子惊蛰版6 小时前
🪲正在开发后台管理系统的同学 UnoCSS 一定要用起来
前端·css
我怎么能这么帅气7 小时前
拯救排版焦虑!CSS省略号的终极指南:单行、多行、生效与失效场景全解析
前端·css
前端大白话7 小时前
前端工程师必看!手把手教你用CSS实现超丝滑的自适应视频嵌入
前端·css·前端框架
一个天蝎座 白勺 程序猿8 小时前
Python爬虫(4)CSS核心机制:全面解析选择器分类、用法与实战应用
css·爬虫·python
sunbyte15 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
鹿九巫20 小时前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
HuaHua的世界1 天前
说说 Vue 中 CSS scoped 的原理?
css·vue.js