css 文字图片居中及网格布局

以下内容纯自已个人理解,直接上代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .centered-text {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px; /* 容器的高度 */
            border: 1px solid #000; /* 边框仅为了清楚展示容器 */
            /*text-align: center; !* 水平居中 *!*/
            /*padding-top: 25px; !* 垂直居中 *!*/
            /*padding-bottom: 25px; !* 垂直居中 *!*/
            /*box-sizing: border-box; !* 设置盒子的内边距计算方式为包含在宽度和高度之内 *!*/
        }
        /*.centered-text {*/
        /*    height: 100px; !* 容器的高度 *!*/
        /*    border: 1px solid #000; !* 边框仅为了清楚展示容器 *!*/
        /*    text-align: center; !* 水平居中 *!*/
        /*    line-height: 100px; !* 垂直居中,设置和容器高度一样 *!*/
        /*}*/

        /* 使用Flexbox实现图片居中 */
        /*.centered-img {*/
        /*    display: flex;*/
        /*    justify-content: center;*/
        /*    align-items: center;*/
        /*    height: 600px; !* 容器的高度 *!*/
        /*    border: 1px solid #000; !* 边框仅为了清楚展示容器 *!*/
        /*    padding-top: 150px;*/
        /*    padding-bottom: 150px;*/
        /*    box-sizing: border-box;*/
        /*    text-align: center;*/
        /*    !*max-width: 100%; !*表示图片的最大宽度不超过其父元素的100%,这样可以避免图片拉伸变形*!*!*/
        /*    !*height: auto; !*表示高度自动调整,以保持图片的原始宽高比*!*!*/
        /*}*/

        /* 使用Grid网格布局实现图片居中 */
        .centered-img {
            display: grid; /*设置为网格布局*/
            place-items: center; /* 这相当于 align-items: center 和 justify-items: center 的简写 */
            border: 1px solid #000;
            margin-bottom: 10px;
        }

        .centered-img img {
            max-width: 100%; /* 确保图片不会超过其容器 */
            height: auto; /* 保持图片的宽高比 */
            /*margin-right: 10px; !* 在图片和文字之间添加一些间隔 *!*/
        }
        .grid-head {
            grid-area: header; /*grid-area 属性来命名网格项,可以给下面的grid属性使用*/
            border: 1px solid #000;
            text-align: center;
            line-height: 60px;
        }
        .grid-container {
            display: grid;
            grid:"header header header" auto;
            grid-template-columns: auto auto auto; /*创建3列*/
            grid-template-rows: 60px auto; /*创建3行*/
            /*background-color: #2196F3;*/
            /*padding: 10px;*/
        }
        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 20px;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="centered-text">
    居中文字
</div>
<div class="centered-img">
    <p>图片居中</p>
<!--    <img src="" alt="图片" style="margin: auto; display: block;">-->
<!--    <img src="img/1723778588420.jpg" />-->
    <img src="img/1723779175838.jpg" />
</div>
<div class="grid-container">
    <div class="grid-head">网格布局</div>
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>
</body>
</html>

郊果如下:

相关推荐
CAD老兵21 小时前
打造高性能二维图纸渲染引擎系列(二):创建结构化和可扩展的渲染场景
前端·webgl·three.js
王木风21 小时前
1分钟理解什么是MySQL的Buffer Pool和LRU 算法?
前端·mysql
Jerry_Rod21 小时前
vue 项目如何使用 mqtt 通信
前端·vue.js
渣哥21 小时前
数据一致性全靠它!Spring 事务传播行为没搞懂=大坑
javascript·后端·面试
云中雾丽21 小时前
Flutter中路由配置的各种方案
前端
不一样的少年_21 小时前
女朋友炸了:刚打开的网页怎么又没了?我反手甩出一键恢复按钮!
前端·javascript·浏览器
Renounce21 小时前
【Android】让 Android 界面 “动” 起来:动画知识点大起底
前端
Asort21 小时前
JavaScript设计模式(十四)——命令模式:解耦请求发送者与接收者
前端·javascript·设计模式
小茴香3531 天前
Vue 脚手架(Vue CLI)
前端·javascript·vue.js
午安~婉1 天前
ESLint
前端·eslint·检查