CODEWITHSUNDEEP
htmlcssflexbox
Rogozin
Rogozin

Reputation: 45

Position text under responsive div

I'm looking for help to position text directly underneath responsive divs(images).

Divs in question jump up and down the page to adjust to the viewport nicely, but I can't figure out how to fix the text which is supposed to be always centered underneath each image.

Text-align: center; works nicely on max view-port but once the boxes are responding to the smaller window the text doesn't quite follow them in the center, it sort of scooches to the side.

Any suggestions appreciated, not sure how well my code snippet will work...

.flexgrid {
    display: flex; 
    flex-direction: row;
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap;
}

.flexgrid > li { 
    width: 20%; 
    list-style-type: none;
}


@media only screen and (max-width: 1337px) {
  .flexgrid > li { 
        width: 25%;
    }
}


@media only screen and (max-width: 1072) {
  .flexgrid > li { 
        width: 35%;
    }
}
<ul class="flexgrid">

    <li><div class="col-lg-2 col-sm-6"><img src="https://dummyimage.com/300x300/000/fff" alt="" style="display: block; height: 250px; width: 250px; margin: 5px;"></div>Coal</li>
    <li><div class="col-lg-2 col-sm-6"><img src="https://dummyimage.com/300x300/000/fff" alt="" style="display: block; height: 250px; width: 250px; margin: 5px;"></div>Dry Wood</li>
    <li><div class="col-lg-2 col-sm-6"><img src="https://dummyimage.com/300x300/000/fff" alt="" style="display: block; height: 250px; width: 250px; margin: 5px;"></div>Something else</li>
    <li><div class="col-lg-2 col-sm-6"><img src="https://dummyimage.com/300x300/000/fff" alt="" style="display: block; height: 250px; width: 250px; margin: 5px;"></div>Something else</li>
    <li><div class="col-lg-2 col-sm-6"><img src="https://dummyimage.com/300x300/000/fff" alt="" style="display: block; height: 250px; width: 250px; margin: 5px;"></div>Something else</li>
    
</ul>

Upvotes: 0

Views: 109

Answers (1)

Johannes
Johannes

Reputation: 67748

You can use figure and figcaption tags (i.e. the usual way to put text under an image and handle them as a unit) which can be styled as desired - see below. Also borders for image and text together, background etc. would be possible that way.

.flexgrid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.flexgrid>li {
  width: 20%;
  list-style-type: none;
}

figure {
  width: 100%;
  text-align: center;
}

img {
  width: 100%;
  height: auto;
  display: block;
  padding: 5px;
  box-sizing: border-box;
}

figcaption {
  text-align: center;
}

@media only screen and (max-width: 1337px) {
  .flexgrid>li {
    width: 25%;
  }
}

@media only screen and (max-width: 1072) {
  .flexgrid>li {
    width: 35%;
  }
}
<ul class="flexgrid">

  <li>
    <div class="col-lg-2 col-sm-6">
      <figure><img src="https://dummyimage.com/300x300/000/fff" alt=""
        <figcaption>Coal</figcaption>
      </figure>
    </div>
  </li>
  <li>
    <div class="col-lg-2 col-sm-6">
      <figure><img src="https://dummyimage.com/300x300/000/fff" alt=""
        <figcaption>Dry Wood</figcaption>
      </figure>
    </div>
  </li>
  <li>
    <div class="col-lg-2 col-sm-6">
      <figure><img src="https://dummyimage.com/300x300/000/fff" alt=""
        <figcaption>Something else</figcaption>
      </figure>
    </div>
  </li>
  <li>
    <div class="col-lg-2 col-sm-6">
      <figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
        <figcaption>Something else</figcaption>
      </figure>
    </div>
  </li>
  <li>
    <div class="col-lg-2 col-sm-6">
      <figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
        <figcaption>Something else</figcaption>
      </figure>
    </div>
  </li>

</ul>

Upvotes: 2

Related Questions