Adjust the alignment of the final row in several div elements within a container

I am working with a container div that houses several nested divs. Here is the CSS code for the structure: 

.result-container {
  max-width: 650px;
  margin: 0 auto;
  background: blue;
  border: 1px solid;
  position: relative;
  text-align: center;
}

.result-container .item {
  display: inline-block;
  max-width: 200px;
  min-width: 200px;
  background: green;
  border: 1px solid;
}

.result-container .item img {
  display: block;
  margin: 0 auto;
}
<div class="result-container">
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>



</div>

The parent div utilizes the 'text-align: center' property to center align the child divs, but I am not satisfied with how the last row appears.

https://i.sstatic.net/exUe9.png

I am looking for a way to achieve the layout depicted in the image below:

https://i.sstatic.net/TMdUf.png

If I were to use 'display: table', would that be considered a good practice? I appreciate any guidance you can provide.

htmlcss

Answer №1

By setting a fixed width on the container and distributing the width between three DIVs, you can achieve the desired layout. Make sure to use a fixed width for each DIV and adjust the margins accordingly. Here is an example CSS code:

.result-container {
  width: 614px;
  padding: 0 18px;
  text-align: left;
  etc..
}


.result-container {
  width: 614px;
  padding: 0 18px;
  margin: 0 auto;
  background: blue;
  border: 1px solid;
  position: relative;
  text-align: left;
}

.result-container .item {
  display: inline-block;
  max-width: 200px;
  min-width: 200px;
  background: green;
  border: 1px solid;
}

.result-container .item img {
  display: block;
  margin: 0 auto;
}
<div class="result-container">
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>
  <div class="item">
    <img src="http://devimg.com/150x150" width="150" height="150">

  </div>



</div>

Answer №2

One suggestion is to utilize the text-align-last property for inline-block elements.

 div.wrapper {
        width: 680px;
        text-align: justify;
        text-align-last: center;
        border: 2px solid blue;
    }

    div.item{
        width: 100px;
        border:1px solid red;
        display: inline-block;
        height:100px;
    }


<div class="wrapper">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>

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

Can a PHP variable be passed along with a div ID in any way?

I am attempting to transfer a PHP value through the "href" attribute from one div to another. While we can achieve this between pages, like so: <a href="somepage.php?id=<?php echo $id;?>"></a> Is there a way to accomplish this using an ...

phphtmlcss

How can I retrieve values from HTML5 data attributes using Selenium in Python?

How can I extract the value "165796011" from data-gbfilter-checkbox? I attempted to do so using the following code: element= driver.find_element_by_css_selector('#widgetFilters > div:nth-child(1) > div.a-row.a-expander-container.a-expander-inl ...

pythonhtmlseleniumweb-scraping

Customizing the main icon in the Windows 10 Action Center through a notification from Microsoft Edge

I am facing an issue with setting the top icon of a notification sent from a website in Microsoft Edge. Let's consider this code as an example: Notification.requestPermission(function (permission) { if (permission == "granted") { new ...

javascripthtmlnotificationswindows-10microsoft-edge

Using a diverse class for enhancing the PrimeVue dialog's maximizable feature

I'm currently working with the PrimeVue Dialog component. My goal now is to apply different styles depending on whether the dialog is maximized or not. Let's keep it simple by saying I want to change the text to bold or red when the dialog is max ...

javascriptcssvue.jsdialogprimevue

Tips for incorporating transitions into CSS styling

After successfully adding a picture over an element when hovering over it, I decided to include a transition: 0.2s; property but unfortunately the transition effect is not working as expected. Why is this happening? My intention is for the picture to smoot ...

csscss-transitionstransition

Showcasing Portfolio Work in a User-Friendly Mobile Design

Currently revamping my portfolio website and looking for ways to optimize the display of my personal projects. I have a card-like interface in place that works well on desktop but only shows one project at a time on mobile devices. Seeking solutions to imp ...

javascripthtmlcsssliderportfolio

Retrieving Data from all Rows in jQuery DataTables

Is there a way to copy all rows in jQuery DataTables into a JavaScript array by clicking the header checkbox? https://i.sstatic.net/57dTB.png I need to locate where jQuery DataTables store the HTML for the remaining page of rows so that I can manipulate ...

javascriptjqueryhtmlajaxdatatables

The functionality of HTML5 canvas image objects is not functioning as expected

I have been working on a function to retrieve an image object using HTML5 canvas, but I keep encountering an error alert (onerror event) function FetchImage() { var img = new Image(); img.src = "http://localhost/assets/images/loadedsprite.png"; ...

javascripthtmlcanvas

Tips for refreshing only a portion of a webpage using JavaScript/jQuery

I have two distinct navigational sections on my website. The left column has its own navigation menu, while the right column (main content area) contains a separate set of links: My goal is to click on a link in the left-hand sidebar (such as "Resume", "E ...

javascriptjqueryhtml

Issue with Rendering Rapheal Pie Chart in Internet Explorer 9

I encountered an issue in IE9 where I received the error message "SVG4601: SVG Path data has incorrect format and could not be completely parsed" while trying to draw a pie chart on an HTML5 page using Raphael JS and SVG. The problem arose when the "d" att ...

htmlsvginternet-explorer-9raphaelpie-chart

The getimagesize functionality seems to be malfunctioning

I have developed a function that resizes images to fit as a background image for a div. I provide the function with the div size and the image path. It works perfectly when the height is larger than the width, but it fails when the width is larger than the ...

phphtmlcss

Remove the space gap between the header and card in Bootstrap

I'm in the process of creating a sleek landing/login page for my web application using Bootstrap. The current layout includes a header with text and an image, followed by a login form within a card. Looking at the image provided, it's clear that ...

htmlcssbootstrap-5

Why is the official website for the Apache HTTP Server httpd.apache.org when HTTPd is actually a program that can be run?

After conducting thorough research, I discovered that HTTPd (HyperText Transfer Protocol daemon) is a software program that operates in the background of a web server. My amazement and confusion peaked when I came across the webpage 'httpd.apache.org ...

htmlapachehttpwebserverhttpd.conf

Displaying alerts and feedback - validating forms

I am relatively new to the world of web development and am eager to progress in the right direction. I have a question regarding form validation. I have a small form that is designed to input information into a database, requiring the use of PHP. Once the ...

phpjqueryhtmlforms

Creating square images in CSS without specifying their dimensions can easily be done by centering

Is there a way to create square images from rectangular ones in CSS, while ensuring they remain centered on the page? I have come across numerous solutions that use fixed pixel sizes, but I need my images to be responsive and set in percentages. Essential ...

phphtmlcsswordpress

Tips for resizing the MUI-card on a smaller screen

Is there a way to adjust the width of the card on small screen sizes? It appears too small. You can view my recreation on codesandbox here: https://codesandbox.io/s/nameless-darkness-d8tsq9?file=/demo.js The width seems inadequate for this particular scr ...

javascriptcssreactjsmaterial-ui

Upon loading a website, the Chrome browser will automatically set the zoom level to 80%

Recently, I've encountered a perplexing issue with Chrome where my website is automatically zoomed out from 100% to 80%. It seems that browsers cache zoom settings based on the domain and apply them when users revisit the site. However, in this case, ...

htmlangulargoogle-chromefirefoxbrowser

When resizing the browser, the divs stack neatly without overlapping

We need to ensure that the 4 divs stack on top of each other without overlapping! The header should have the same width as the footer, 100% The menu should stack with the header and footer The content should be centered on the page and stack with the oth ...

htmlcssoverlapping

Preventing PHP function calls from halting page loading without refreshing

I have encountered an issue while attempting to call a PHP function from my HTML code. My PHP script primarily connects to a Java server to request information about Twitter accounts. I am specifically asking for their profile picture's URL and their ...

phphtml

Issues with webpage responsiveness, width not adjusting correctly

Just completed coding my website and now I'm facing a new challenge. I am focusing on making it responsive for tablet screens (768px) starting with the header section, but for some reason, the modifications I make in the responsive.css file are not ta ...

javascripthtmlcssresponsive-design