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

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

news 2025/6/26 19:47:08

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

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

郊果如下：