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

news2024/12/26 18:15:15

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

<!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>

郊果如下：