Question

好的，所以我有一个奇怪的要求尝试实现。我有一个页面，其中包含div的列表，其中包含图像和链接。每行最多有3个div。但有时候，最后一行可能只有1或2个div。我需要尝试做的是设置，如果最后一行只有1或2个div，那么这些div需要在它们的行内水平居中。

这是可能的吗？我是否需要使用JavaScript / jQuery来计算最后一行中的div数？或者我可以用CSS做到这一切吗？

以下是如何设置div：

  <div class="About-Categories clearfix">
    <div class="About-Category clearfix">
        <img src="[image url]" class="image">
        <a href="#">[link text]</a>
     </div>
     <!--Additional About-Category divs go here as needed-->
  </div>

可以有任意数量的About-Category div，但设置css以确保页面宽度内只有3个About-Category div（直到达到460px的屏幕大小）。

现在的CSS：

.About-Categories{
  text-align: center;
}
.About-Category{
  float: left;
  height: auto;
  margin-left: 0%;
  margin-top: 0px;
  display:inline-block;
  padding: 30px;
  width: 33%;
  &:nth-of-type(1){
    clear: both;
  }
}

Answer 1

＆＃13;

#wrap { 
    width: 600px;
    text-align: center;
}
.tile {
    width: 198px;
    height: 100px;
    border: 1px solid #000;
    display: inline-block;
    margin: 0;
    padding: 0;
}

＆＃13;

<div id="wrap">
<div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div>
</div>

＆＃13;

Answer 2

如果您将div显示为inline-block，则他们会尊重text-align属性。结合尺寸适合三个div的包装，你应该得到你正在寻找的结果。

示例：

#wrap { 
    width: 600px;
    text-align: center;
}
.tile {
    width: 198px;
    height: 100px;
    border: 1px solid #000;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
}

<div id="wrap">
<div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div>
</div>

如果存在1或2个div，则在最后一行中水平自动居中div内容

2 个答案: