调整页面大小时如何使 CSS 中的这些框居中？
我有以下盒子（文章）
当我尝试调整页面大小时，它变成这样：
我希望它在调整窗口大小时自动居中，以避免右侧出现巨大间隙，但它需要采用与现有格式相同的格式。基本上只需将整个组移动到中心，而不将各个框居中，因为我希望它们如图所示向左浮动。
编辑：这就是我所追求的：
这是我当前的CSS：
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.container {
width: 90%;
height: 100%;
overflow: hidden;
background: skyblue;
margin: auto;
padding: 20px;
}
.container article {
float: left;
width: 250px;
height: 250px;
background: blue;
margin: 25px
}
和我的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shop</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<article>
<h2>Hello</h2>
</article>
<article>
<h2>Hello</h2>
</article>
<article>
<h2>Hello</h2>
</article>
<article>
<h2>Hello</h2>
</article>
<article>
<h2>Hello</h2>
</article>
</div>
</body>
</html>
有只小跳蛙2回答
-
慕莱坞森
使用灵活性，卢克display: flex;flex-wrap: wrap;justify-content: center;* { margin: 0; padding: 0;}html, body { height: 100%;}.container { width: 90%; height: 100%; overflow: hidden; background: skyblue; margin: auto; padding: 20px; display: flex; flex-wrap: wrap; justify-content: center;}.container article { width: 250px; height: 250px; background: blue; margin: 25px}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Shop</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <article> <h2>Hello</h2> </article> <article> <h2>Hello</h2> </article> <article> <h2>Hello</h2> </article> <article> <h2>Hello</h2> </article> <article> <h2>Hello</h2> </article> </div> </body></html> -
忽然笑
它没有从左侧包裹盒子，所以我使用 CSS 网格解决了它：HTML：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="grid-container"> <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 class="grid-item">10</div> <div class="grid-item">11</div> <div class="grid-item">12</div> <div class="grid-item">13</div> <div class="grid-item">14</div> </div> </body></html>CSS：.grid-container { display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-gap: 40px; justify-content: center; padding: 40px 10px 40px 40px; background-color: #2196F3;}.grid-item { width: 200px; height: 200px; background-color: #FFFFFF; font-size: 30px; text-align: left;}笔记：grid-template-columns: repeat(auto-fill, 200px); 200px是盒子的宽度。justify-content: center; 用于将容器与盒子一起居中。这可行，但会使盒子稍微偏离中心并偏向右侧。为了补偿，我在右侧添加了10pxpadding: 40px 10px 40px 40px内边距： 。这些值可能有所不同。工作中的jsfiddle
随时随地看视频慕课网APP
相关分类
Go