调整页面大小时，如何在CSS中对这些框进行居中？
调整页面大小时，如何在CSS中对这些框进行居中？
提问于 2020-03-06 07:49:45
我有以下的框(文章)
当我试图调整页面的大小时，它变成如下：
我希望它自动居中，同时调整窗口大小，以避免右侧的巨大缺口，但它需要以与原来相同的格式。基本上，只需将整个组移动到中心，而不对单个框进行对中，因为我希望它们在图片中显示时向左浮动。
编辑：这就是我想要的：
下面是我当前的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
Stack Overflow用户
回答已采纳
发布于 2020-03-06 12:40:37
@ne1410s的回答工作，但是它不会从左边包装盒子，所以我用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);200 of 是方框的宽度。justify-content: center；用于将容器与盒一起对中。这是可行的，但让盒子轻巧地偏离中心向右。作为补偿，我在右侧添加了10 To 填充：padding: 40px 10px 40px 40px。数值可能会不同。
工作小提琴
Stack Overflow用户
发布于 2020-03-06 07:54:26
用挠曲，卢克
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60559649
复制相关文章
相似问题
腾讯云开发者
