我正在努力创建有效堆叠和居中对齐的响应式pod(盒子)。已成功将盒子堆叠但无法成功应用中心对齐。需要框对齐居中对齐而不是当前左对齐:
当前代码:
0..9
.container {
width:100%;
height:600px;
}
.content {
float:left;
height:275px;
margin-left:10px;
margin-right:10px;
}
.content1 {
width:300px;
padding:10px;
margin-top:20px;
border: 1px solid rgb(204, 204, 204);
}
.content2 {
width:300px;
padding:10px;
margin-top:20px;
border: 1px solid rgb(204, 204, 204);
}
所有人都非常感谢!
答案 0 :(得分:1)
可以采取很多措施来改善整体结构和代码可读性,但要回答您的问题,请将text-align: center;
添加到.container
类,并将.content
的浮动替换为{{1} }}
答案 1 :(得分:0)
.fullbox{
margin: 0 auto;
display: table;
}
.container {
width:100%;
}
.content {
float:left;
height:275px;
margin-left:10px;
margin-right:10px;
}
.content1 {
width:300px;
padding:10px;
margin-top:20px;
border: 1px solid rgb(204, 204, 204);
}
.content2 {
width:300px;
padding:10px;
margin-top:20px;
border: 1px solid rgb(204, 204, 204);
}
<div class="fullbox">
<div class="container">
<div class="content1 content">
<h2>Box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae risus semper, faucibus nulla vitae, vulputate ante. Fusce non erat eu metus pellentesque suscipit facilisis ut dolor.</p>
</div>
<div class="content2 content">
<h2>Box 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae risus semper, faucibus nulla vitae, vulputate ante. Fusce non erat eu metus pellentesque suscipit facilisis ut dolor.</p>
</div>
</div>
</div>
我是否在这种情况下,你应该写@ media-Query,如下所示,
只需添加此代码,
.fullbox{
margin: 0 auto;
display: table;
}
.container {
width:100%;
}
.content {
float:left;
height:275px;
margin-left:10px;
margin-right:10px;
}
.content1 {
width:300px;
padding:10px;
margin-top:20px;
border: 1px solid rgb(204, 204, 204);
}
.content2 {
width:300px;
padding:10px;
margin-top:20px;
border: 1px solid rgb(204, 204, 204);
}
<div class="fullbox">
<div class="container">
<div class="content1 content">
<h2>Box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae risus semper, faucibus nulla vitae, vulputate ante. Fusce non erat eu metus pellentesque suscipit facilisis ut dolor.</p>
</div>
<div class="content2 content">
<h2>Box 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae risus semper, faucibus nulla vitae, vulputate ante. Fusce non erat eu metus pellentesque suscipit facilisis ut dolor.</p>
</div>
</div>
</div>