在 parent DIV 内对齐 child DIVs
Align to center child DIVs inside parent DIV
当尺寸小于 768px
时,我试图在页面中间对齐 DIV
我有一个 parent DIV,其中包含三个不同的 DIV。所以我使用了媒体查询,并在一个显示尺寸内将这个“clear:both”添加到 display_type 和 按钮类。所以这样一来,每个 div 都会在自己的行中。
<div class="category_header container">
<div class="products">
<label class="header t_left">Sorter efter:</label>
<div class="select t_left">
</div>
<div class="display_type">
<ul class="clearfix">
<li></li>
<li></li>
</ul>
</div>
<div class="buttons">
<span class="button"></span>
<span class="button"></span>
</div>
</div>
</div>
然后我尝试了几种方法将它们居中对齐,但都没有用。 CSS 的样子:
.container {
width: 1180px;
margin: 0 auto;
padding: 0;
}
.category_header {
margin-top: 30px;
margin-bottom: 30px;
padding: 0 0 0 25px;
}
.products {
float: left;
width: 350px;
margin: 3.5px 0 0;
}
.products label {
margin: 0 30px 0 0;
line-height: 40px;
height: 40px;
display: block;
}
.display_type {
float: left;
width: 350px;
color: #A1ABB6;
margin: 12px 0 0;
}
.category_header .buttons {
float: right;
width: 427px;
}
我尝试将以下内容添加到 parent div "category_header" 但没有成功。我也对 child div 进行了同样的尝试。我在 google 上找到了很多解决方案,但似乎没有一个有效。 (显示:inline-block;text-align:居中等等)
@media screen and (max-width: Number px) and (min-width: Number px)
{
.category_header {
margin: 0 auto;
width: 50%;
}
}
谁能帮我解决这个问题?谢谢
试试这个:
@media screen and (max-width: 768px)
{
.display_type, .buttons, .products
{
float:none;
margin:auto;
}
}
当尺寸小于 768px
时,我试图在页面中间对齐 DIV我有一个 parent DIV,其中包含三个不同的 DIV。所以我使用了媒体查询,并在一个显示尺寸内将这个“clear:both”添加到 display_type 和 按钮类。所以这样一来,每个 div 都会在自己的行中。
<div class="category_header container">
<div class="products">
<label class="header t_left">Sorter efter:</label>
<div class="select t_left">
</div>
<div class="display_type">
<ul class="clearfix">
<li></li>
<li></li>
</ul>
</div>
<div class="buttons">
<span class="button"></span>
<span class="button"></span>
</div>
</div>
</div>
然后我尝试了几种方法将它们居中对齐,但都没有用。 CSS 的样子:
.container {
width: 1180px;
margin: 0 auto;
padding: 0;
}
.category_header {
margin-top: 30px;
margin-bottom: 30px;
padding: 0 0 0 25px;
}
.products {
float: left;
width: 350px;
margin: 3.5px 0 0;
}
.products label {
margin: 0 30px 0 0;
line-height: 40px;
height: 40px;
display: block;
}
.display_type {
float: left;
width: 350px;
color: #A1ABB6;
margin: 12px 0 0;
}
.category_header .buttons {
float: right;
width: 427px;
}
我尝试将以下内容添加到 parent div "category_header" 但没有成功。我也对 child div 进行了同样的尝试。我在 google 上找到了很多解决方案,但似乎没有一个有效。 (显示:inline-block;text-align:居中等等)
@media screen and (max-width: Number px) and (min-width: Number px)
{
.category_header {
margin: 0 auto;
width: 50%;
}
}
谁能帮我解决这个问题?谢谢
试试这个:
@media screen and (max-width: 768px)
{
.display_type, .buttons, .products
{
float:none;
margin:auto;
}
}