Place the text below the adaptable div

Could anyone offer guidance on how to properly align text underneath responsive images within divs?

The issue I'm facing is that the divs adjust smoothly based on the viewport size, but the text below them doesn't stay centered as intended.

While "text-align: center;" works fine at maximum viewport width, it gets skewed when the boxes respond to a smaller window size.

I would greatly appreciate any suggestions or tips, as I am unsure if my code snippet will be effective...

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

htmlcssflexbox

Answer №1

To display text under an image and style them as a unit, you can utilize the figure and figcaption tags. This allows for custom styling such as borders for both the image and text together, backgrounds, etc.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing AJAX to dynamically populate an HTML list from a database and then saving the user's newly selected value back to the database

I'm working on dynamically populating a list from a database using AJAX and then updating the selected value back to the database with a servlet. What's the best approach for achieving this? Typically, I use the following code for dynamic update ...

htmlajaxjspservletsgson

Field for text input enclosed within the <select> tag

I have a project where I am implementing a dropdown using AngularJS. Here is the code snippet: <div class="col-md-9"> <input type="text" placeholder="Enter Module" list="names" ng-model="data.Name" /> <select id="names" class ...

htmlangularjscomboboxhtml-select

Choose a specific option from the dropdown menu using a URL parameter

After reviewing this code snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> // <![CDATA[ $(document).ready(function() { // Parse your query parameters here, and assi ...

javascripthtmljqueryforms

Utilizing Bootstrap datepicker to set maximum and minimum dates based on another date input

I have been attempting to create a restriction on the date selection, where datepicker1 cannot exceed datepicker2, and vice versa. Initially, I tried implementing this feature using (Linked Pickers). Unfortunately, this did not achieve the desired date in ...

jqueryhtmltwitter-bootstrap

Property registered in CSS dynamically

Is it possible to pass dynamic values when using the css registered property? For instance, in the code snippet below, how can I pass on the value ---numValue=35 to to{--num:}? @property --num { syntax: "<integer>"; initial-value: 0; ...

htmlcss

Unable to assign to 'disabled' as it is not recognized as a valid attribute for 'app-button'

How to link the disabled property with my button component? I attempted to add 'disabled' to the HTML file where it should be recognized as an input in the button component (similar to how color and font color are recognized as inputs) ... but ...

htmlangulartypescriptangular-components

The content is overflowing due to the height being set to 100%

I am facing a challenge with designing a webpage that has a header with dynamic height and a content area. The goal is for the content to fill up the remaining space on the page, even if there isn't enough text. This is a common issue that many peopl ...

htmlcss

Smooth carousel navigating through dots

I am currently using the slick carousel from http://kenwheeler.github.io/slick, and I am looking for a way to limit the number of dots to 8 even when there are more than 8 slides. The navigation dots should include arrows on the left and right sides to in ...

javascriptjquerycsscarouselslick.js

The Prev and Next controls on the web carousel have mysteriously vanished

I managed to successfully create a carousel in the picture below, but I'm facing an issue where the next button is positioned on the white side of the page. Despite trying to enlarge the carousel's size, it ends up going below the category contai ...

htmlcarousel

Ensuring that the second level unordered list is set to a height of 100% of the first unordered list, rather than the

I'm working with this menu http://codepen.io/alexandernst/pen/oxpGYQ (I wanted to include it here but the result viewer on SO is causing some display issues...) and I am trying to ensure that the second and third level ul elements are the same height ...

htmlcss

Code - Capture user's input

I have multiple input fields in my HTML document and I want to retrieve the text entered into one of them. Here's an example of one such input field: <TH> <FORM> <input name="designation" type="text" size="12" /> < ...

javascriptjqueryhtmlinput

There seems to be a glitch in my PHP comment validation function—it does not seem to be functioning

This form is contained in a PHP file named single.php. <form action="comments.php" method="post" > <?php include(ROOT_PATH . "/app/helpers/formErrors.php"); ?> <input type= "hidden" name="id" value= & ...

phphtml

Encountering a 404 error while loading CSS in a Django application

I'm currently in the process of developing a chatbot application. I'm encountering issues with loading the CSS for the frontend using django's static data load feature. Here are the file paths: CSS path: C:\Documents\Django_Works ...

pythonhtmlcssdjango

Ways to modify the font style of Python comments in JupyterLab's code cells and code editor:

Many resources discuss how to change font families for all content, but I am seeking guidance on making syntax-specific changes. For example, I would like to switch the font style of Python comments from italic to normal. Can anyone offer assistance? Thank ...

pythoncssjupyterjupyter-lab

What is the best method to position images in the same way as seen in the screenshot

Any tips on aligning images shown in the screenshot? Please note that the images will be from the backend. https://i.stack.imgur.com/LnYLM.jpg I experimented with code to position images using top, right, left, and bottom properties, but it becomes cumb ...

javascripthtmlcssbootstrap-4

I cannot seem to alter the background color of my image through the use of external CSS

body { background-color: #f6f7d4; } h1, h3, hr { color: #68b8ab; } hr { width: 100px; border-style: dotted none none; border-color: gray; border-width: 5px; } img { background-color: black; } Although the external CSS code a ...

htmlcss

How can I eliminate the outline from the modal backdrop using Material UI styling shown in the image provided?

https://i.stack.imgur.com/cBCzd.png After attempting to remove the border and box shadow, I am still encountering issues with lines appearing only when clicking on the modal body. The modal styling code has been omitted as it primarily includes flex styli ...

cssreactjsmaterial-uimodal-dialog

Invisible anchor rows in GWT's UIBinder grid view

While developing my GWT application, I encountered an issue in a composite class where I am creating a Grid UI binder. Each cell of the grid contains an anchor UI Binder element. However, upon loading the page in the application, I noticed that the table w ...

javahtmlgwtgriduibinder

Display a div when hovering over a span with custom styling

Don't let the title fool you. http://jsfiddle.net/whb8A/ I'm struggling to style the text inside a span tag within a div. The h3 element shouldn't be nested in the span, but removing it makes it difficult to style with CSS. When hovering ...

csshtml

What could be causing the page to automatically scroll to the bottom upon loading?

My experience with this bootstrap/jquery page in Firefox (v39, latest updates installed) has been unusual as it always seems to jump to the bottom of the page upon clicking. Upon inspecting the code, I couldn't find any JavaScript responsible for thi ...

javascriptjquerycsstwitter-bootstrap