0

I want to show a number of products inside a centered 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>

As you can see in this fiddle, the inside divs are not aligned vertically, as they start at different points depending on the text they contain.

Questions: 1) Why is this happening? 2) How can I solve this and get what I want?

And what do I want? I want all the inside boxes to be centered but aligned vertically. When the browser is too narrow, I want one box to move to the next line but still centered.

MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Javi
  • 170
  • 3
  • 13

4 Answers4

0

If you don't want to convert this entire setup to flexbox, you should be able to solve this simply by adding vertical-align: middle to your cajaproducto class.

You also don't need the flex-wrap: wrap style in your wrapper class.

Simen Fjellstad
  • 392
  • 1
  • 17
0

The inside divs are not aligned vertically, as they start at different points depending on the text they contain.

It is happening because of your display:inline-block:

.cajaproducto {
    display: inline-block;

so replace it by display: inline-flex; and add flex-direction: column; to make sure to keep the content in the right direction:

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

DEMO 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>

Another way to structure:

You can set display:flex; instead of display: block; on listadoproductos and then add margin:auto; to cajaproducto.

DEMO 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>
MaxiGui
  • 6,190
  • 4
  • 16
  • 33
-1

For vertically align you have to use margin: 0 auto on listadoproductos class

   

 .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>
Aman
  • 1,502
  • 1
  • 8
  • 13
-2

Weldone brother, you have tried but if you want to achieve the three inner divs postion vertically as you have said, then change you parent div code to this:

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

As you can see, you need to make the display flex and not block to make the flex attributes work, then you can also use different flex attributes inside the parent divs to create different layouts as you want.And also you should add a new style which is justify-content:center which would center the items and a margin:0 auto

This would give the desired result. If you will like to learn more about flex, this tutorial is perfect for it https://www.youtube.com/watch?v=-Wlt8NRtOpo

coderboy
  • 741
  • 2
  • 17