垂直放置，同时使用 css 在块 div 中居中各种内联块 div [重复]

Question

我想在一个居中的 div 中显示一些产品。

.listadoproductos {
    display: block;
    max-width: 992px;
    flex-wrap: wrap;
    text-align: center;
}
.cajaproducto {
    display: inline-block;
    width: 17.8%;
    min-width: 150px;
    height: 310px;
    padding: 4px;
    margin-top: 10px;
    line-height: 1.42857143;
    background-color: #c596971f;
    border: 1px solid #ddd;
    border-radius: 4px;
}

<div class="listadoproductos">
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="news.php?tab=1&amp;p=1"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=1">Product 1</a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">Primer municipio</span>        
      </div>

  </div>
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="news.php?tab=1&amp;p=2"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=2">This is a far larger product name</a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">In a far longer city name</span>        
      </div>

  </div>
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="newshop.php?tab=1&amp;p=3"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="newshop.php?tab=1&amp;p=3">Third product</a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">Third city</span>        
      </div>

  </div>
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="newshop.php?tab=1&amp;p=7"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=7">Another product with a relatively long name</a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">no village</span>        
      </div>

  </div>
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="newshop.php?tab=1&amp;p=8"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=8"></a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">Village</span>        
      </div>

  </div>
</div>

正如您在this fiddle 中看到的那样，内部 div 不是垂直对齐的，因为它们根据所包含的文本从不同的点开始。

问题： 1) 为什么会这样？ 2) 我怎样才能解决这个问题并得到我想要的？

我想要什么？我希望所有内框居中但垂直对齐。当浏览器太窄时，我希望一个框移动到下一行但仍然居中。

Answer 1

如果您不想将整个设置转换为 flexbox，您只需将 vertical-align: middle 添加到您的 cajaproducto 类即可解决此问题。

您的包装类中也不需要flex-wrap: wrap 样式。

Answer 2

内部 div 不是垂直对齐的，因为它们从不同的位置开始 点取决于它们包含的文本。

这是因为你的display:inline-block:

.cajaproducto {
    display: inline-block;

所以将其替换为display: inline-flex; 并添加flex-direction: column; 以确保将内容保持在正确的方向：

.cajaproducto {
    display: inline-flex;
    flex-direction: column;

演示 1：

.listadoproductos {
    display: block;
    max-width: 992px;
    flex-wrap: wrap;
    text-align: center;
}
.cajaproducto {
    display: inline-flex;
    flex-direction: column;
    width: 17.8%;
    min-width: 150px;
    height: 310px;
    padding: 4px;
    margin-top: 10px;
    line-height: 1.42857143;
    background-color: #c596971f;
    border: 1px solid #ddd;
    border-radius: 4px;
}

<div class="listadoproductos">
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="news.php?tab=1&amp;p=1"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=1">Product 1</a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">Primer municipio</span>        
    </div>

  </div>
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="news.php?tab=1&amp;p=2"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=2">This is a far larger product name</a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">In a far longer city name</span>        
      </div>

  </div>
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="newshop.php?tab=1&amp;p=3"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="newshop.php?tab=1&amp;p=3">Third product</a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">Third city</span>        
      </div>

  </div>
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="newshop.php?tab=1&amp;p=7"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=7">Another product with a relatively long name</a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">no village</span>        
      </div>

  </div>
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="newshop.php?tab=1&amp;p=8"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=8"></a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">Village</span>        
      </div>

  </div>
</div>

---

另一种结构方式：

您可以在listadoproductos 上设置display:flex; 而不是display: block;，然后将margin:auto; 添加到cajaproducto。

演示 2：

.listadoproductos {
    /*display: block;*/
    display:flex;
    max-width: 992px;
    flex-wrap: wrap;
    text-align: center;
}
.cajaproducto {
    margin:auto;
    display: inline-block;
    width: 17.8%;
    min-width: 150px;
    height: 310px;
    padding: 4px;
    margin-top: 10px;
    line-height: 1.42857143;
    background-color: #c596971f;
    border: 1px solid #ddd;
    border-radius: 4px;
}

<div class="listadoproductos">
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="news.php?tab=1&amp;p=1"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=1">Product 1</a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">Primer municipio</span>        
      </div>

  </div>
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="news.php?tab=1&amp;p=2"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=2">This is a far larger product name</a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">In a far longer city name</span>        
      </div>

  </div>
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="newshop.php?tab=1&amp;p=3"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="newshop.php?tab=1&amp;p=3">Third product</a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">Third city</span>        
      </div>

  </div>
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="newshop.php?tab=1&amp;p=7"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=7">Another product with a relatively long name</a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">no village</span>        
      </div>

  </div>
  <div class="cajaproducto">
    <div class="image-cropper">
        <a href="newshop.php?tab=1&amp;p=8"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
      </div>
      <div class="divnombrecajaproducto">
      <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=8"></a></span>
      </div>
      <div class="municipiocajaproducto">
      <span class="municipiocaja">Village</span>        
      </div>

  </div>
</div>

Answer 3

对于垂直对齐，您必须在 listadoproductos 类上使用 margin: 0 auto

   

 .listadoproductos {
    display: flex;
    max-width: 992px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
}
    .cajaproducto {
        display: inline-block;
        width: 17.8%;
        min-width: 150px;
        height: 310px;
        padding: 4px;
        margin-top: 10px;
        line-height: 1.42857143;
        background-color: #c596971f;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    <div class="listadoproductos">
      <div class="cajaproducto">
        <div class="image-cropper">
            <a href="news.php?tab=1&amp;p=1"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
          </div>
          <div class="divnombrecajaproducto">
          <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=1">Product 1</a></span>
          </div>
          <div class="municipiocajaproducto">
          <span class="municipiocaja">Primer municipio</span>        
          </div>

      </div>
      <div class="cajaproducto">
        <div class="image-cropper">
            <a href="news.php?tab=1&amp;p=2"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
          </div>
          <div class="divnombrecajaproducto">
          <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=2">This is a far larger product name</a></span>
          </div>
          <div class="municipiocajaproducto">
          <span class="municipiocaja">In a far longer city name</span>        
          </div>

      </div>
      <div class="cajaproducto">
        <div class="image-cropper">
            <a href="newshop.php?tab=1&amp;p=3"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
          </div>
          <div class="divnombrecajaproducto">
          <span class="nombrecajaproducto"><a href="newshop.php?tab=1&amp;p=3">Third product</a></span>
          </div>
          <div class="municipiocajaproducto">
          <span class="municipiocaja">Third city</span>        
          </div>

      </div>
      <div class="cajaproducto">
        <div class="image-cropper">
            <a href="newshop.php?tab=1&amp;p=7"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
          </div>
          <div class="divnombrecajaproducto">
          <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=7">Another product with a relatively long name</a></span>
          </div>
          <div class="municipiocajaproducto">
          <span class="municipiocaja">no village</span>        
          </div>

      </div>
      <div class="cajaproducto">
        <div class="image-cropper">
            <a href="newshop.php?tab=1&amp;p=8"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
          </div>
          <div class="divnombrecajaproducto">
          <span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=8"></a></span>
          </div>
          <div class="municipiocajaproducto">
          <span class="municipiocaja">Village</span>        
          </div>

      </div>
    </div>

Answer 4

weldone兄弟，你试过了，但是如果你想实现你所说的三个内部div的垂直位置，那么将你的父div代码更改为：

 .listadoproductos {
    flex-wrap: wrap;
    display: flex;
    max-width: 992px;
    text-align: center;
    justify-content: center;
    margin: 0 auto;
}

如您所见，您需要使显示 flex 而不是阻塞以使 flex 属性起作用，然后您还可以在父 div 中使用不同的 flex 属性来根据需要创建不同的布局。您还应该添加justify-content:center 的新样式将项目居中，margin:0 auto

这将产生预期的结果。如果您想了解更多关于 flex 的知识，本教程非常适合它https://www.youtube.com/watch?v=-Wlt8NRtOpo