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

Issues with click events in the navigation menu

How can I make my menu close when clicking on other parts of my website, instead of opening? I know that I should use a click event for this, but when I implemented a click event, my menu encountered 2 unwanted problems: 1- Whenever I clicked on a menu i ...

javascriptjqueryhtmlcssmenu

I'm searching for a universal guidebook on creating web page layouts

After 5 years of creating webpages, I have realized that my sites tend to have a nostalgic 1995 internet vibe. Despite being a C# programmer with knowledge in HTML, JavaScript, and CSS, my design skills could use some improvement. Is there a quick referenc ...

c#javascripthtmlcss

Checking the status of a checkbox after submitting using AngularJs

For my first application, I am utilizing AngularJs and JavaScript to display information from an API as checkboxes. Currently, the functionality is working well, but I am unsure how to validate if any checkbox options are checked with a submit button. Aft ...

javascripthtmlangularjs

Clicking the popup form causes it to blur out

Having trouble with a blurry pop-up form when clicking the button? Check out the code I've used below: <button class="btn btn-default" data-toggle="modal" data-target="#myModal">ENQUIRE NOW</button> ...

htmljquerycsspopup

Paths of least resistance: Absolute URLs for assets in CSS

What could be causing the absolute path for this asset (the font) not to work while the relative path does? <body> hello friend </body> <style type="text/css"> @font-face { font-family: 'Gilroy'; /* src: ur ...

cssreactjs

Ways to modify the data within a column for every row in a table without relying on props in Vue.js (specifically Element-ui)

I've been stuck on this issue for quite some time now. I've created a table with 3 columns, and for the first two columns, I can easily display the contents of each row using the prop property. However, for the third column, I need to display inf ...

htmlvue.jsvuejs2element-uivue-props

What is the best way to keep horizontal divs aligned in a row with margins between them within a wrapper?

I have arranged three divs in a row with a 10px margin between them within a responsive layout. Currently, the divs have margin-left: 10px; margin-right: 10px; to create spacing. However, I aim to align them perfectly within the wrapper without any extra ...

csshtml

The content of the HTML request may not always be displayed exactly as it appears in the browser

I've been trying to extract comments from a website using Python and urllib. Although I am successful in obtaining the HTML, I noticed that the comment section is missing. Here's what my Python code retrieves: <div data-bv-product-id="681012 ...

pythonhtmlurllib

Attempting to store form data in a database using PHP has proven to be unsuccessful in my efforts

I am facing an issue while trying to add HTML form data into the database using PHP. Unfortunately, I am unable to successfully insert the HTML form data into the database and I'm not sure what mistake I might be making in my code. Below is the code ...

phphtmlmysqlmysqliforms

Difficulty integrating Bootstrap with JavaScript file in Visual Studio Code

I am attempting to incorporate a dynamic progress bar by utilizing Bootstrap's progressbar and creating a custom JavaScript file. The goal is to continuously adjust the width of the progress bar at regular intervals to give the appearance of a moving ...

javascripthtmlcssbootstrap-5

A method for positioning each pair of <li> elements side by side

My goal is to arrange every pair of li elements next to each other (e.g. 0-9, A-B, C-D, ...). Currently, they are aligned one by one. <ul> <li class="alphabetRow"><a href="#" id="alpha_1" class="alphabet active" >0-9</a></li ...

htmlcss

Tips for transferring this text to a new line

I have come across this text that needs to be moved to a new line, This is its current appearance, Here is how I want it to look: HTML code snippet: <div id="content"> <div id="header"> <p> <img class="header-im ...

htmlcss

Pressing on buttons using Selenium WebDriver in Java

While testing a website, I encountered a button that Selenium is unable to click. Despite trying various methods, the button remains unresponsive. Here is the HTML code for the button and its XPath: Has anyone else faced this issue or knows of a solution? ...

javahtmlseleniumselenium-webdriverxpath

CSS: the enigmatic padding of absolute positioning within a table cell

I am encountering an unusual issue while attempting to position a div element absolutely inside a table-cell. In order to achieve absolute positioning, I utilize a wrapper div element with position:relative: HTML <table> <colgroup> ...

htmlcss

The Chrome browser is failing to detect the hover function of the Surface Pen stylus

Encountering an issue with the hover pseudo-class not functioning properly on Surface pad's Chrome browser. The hover effect is working as expected in other browsers, but not in Chrome. I am using a Surface pen to test the hover functionality. HTML: ...

htmlcss

Preserving Scroll Location Through Back Button Usage and Ajax Manipulation of the Document Object Model

Currently, I am incorporating a feature where results are loaded in using ajax with an infinite scroll. However, there is an issue when a user clicks on an item in the list and navigates away from the page - upon returning by clicking the back button, they ...

javascriptjqueryhtmlajax

javascript include new attribute adjustment

I am working with this JavaScript code snippet: <script> $('.tile').on('click', function () { $(".tile").addClass("flipOutX"); setTimeout(function(){ $(".tile-group.main").css({ marginLeft:"-40px", widt ...

javascriptjquerycssclass

How can I style the inner HTML text of an element without altering the style of its subelements? (CSS Selector)

I created an html structure that looks like this: <p> This is some test inside the p tag <div class="some-class"> <div class="sub-div-class"> <i title="title test" data-toggle="tooltip" class="some-icon-class" data-ori ...

htmlcssdomcss-selectorsstyles

Tips for assigning an event to a variable in JavaScript

Here is my javascript code snippet: function drag(ev){ var x= ev.dataTransfer.setData("Text",ev.target.id); } I am trying to pass a variable within this event so that I can perform a specific action. However, the current implementation is not worki ...

javascripthtml

Image superimposed with vertical dimension

I have a photo with specific dimensions and I want to create a div box with a button inside the image, similar to what is shown in this example: Example Image Here is my current code attempt: .wrapper { width: auto; text-align: center; } .wrapper: ...

htmlcss