Clever Geek Handbook

How do I center the alignment of Zurb Foundation block grid items that are flipped to the next line?

I'm using a block grid from the Zurb Foundation framework, but I'm having trouble getting it to fit the way I want it. I configured it so that it displays 4 blocks per line. I have more than 4 blocks, so the ones that don't fit are placed on the next line and aligned to the left. I want these blocks to be centered like this:

enter image description here

Is there a way to do this?

This is what my code looks like:

Html

<ul class="small-block-grid-2 large-block-grid-4 thumbslist">
    {% for project in site.data.settings.projects %}
    <li>
    <a href="#" data-reveal-id="myModal{{ forloop.index }}" class="thumb-unit">
        <div class="thumb-overlay">
            <strong>{{ project.name }}</strong>
        </div>
        <div class="thumb" id="{{ project.folder }}" style="background-image: url(assets/img/{{ project.folder }}/thumb.png);"></div>
    </a>
    </li>
    {% endfor %}
</ul>

audacity

.thumbslist
  margin: auto
  +clearfix

  li
    position: relative
    //display: inline-block
    display: block
    height: 200px 
    overflow: hidden
    padding: 0

 .thumb
    height: 100%
    width: 100%
    background-size: contain
    background-position: center center
    background-repeat: no-repeat
    padding: 0
+3


source to share


2 answers


You need to make the list items non-float so that you can use text-align: center

in the parent:



.thumbslist
  margin: auto
  //+clearfix
  text-align: center // add

  li
    position: relative
    display: inline-block // add
    height: 200px 
    overflow: hidden
    padding: 5px
    float: none // add

  .thumb
    height: 100%
    width: 100%
    background-size: contain
    background-position: center center
    background-repeat: no-repeat
    padding: 0
+5


source


Here's a modern solution for browsers: use flexbox for your layout and change it to small-block-grid-3. Target CSS flexibility rules at <= 991px.

.thumbslist {
  margin: auto;
}
.thumbslist li {
  position: relative;
  display: block;
  height: 200px;
  overflow: hidden;
  padding: 5px;
}
.thumbslist .thumb {
  height: 100%;
  width: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0;
}
.thumbslist {
  margin: auto;
}
.thumbslist li {
  position: relative;
  display: block;
  height: 200px;
  overflow: hidden;
  padding: 5px;
}
.thumbslist .thumb {
  height: 100%;
  width: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0;
}
@media (max-width: 991px) {
  .thumbslist {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

      

        
        
        
      

    


<ul class="small-block-grid-3 large-block-grid-4 thumbslist">
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
</ul>

Codeply

+2


source






More articles:


All Articles