Tips for wrapping and aligning elements in the center

On my website, I have a layout that displays 10 small images (around 100x200 pixels) evenly spaced at the bottom of the page.

|                                                                                     |    
|                   The wide window layout                                          |    
|                                                                                     |    
|                                                                                     |    
|                                                                                     |    
|   +----+  +----+  +----+  +----+  +----+  +----+  +----+  +----+  +----+  +----+    |
|   |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |    |
|   |  1 |  |  2 |  |  3 |  |  4 |  |  5 |  |  6 |  |  7 |  |  8 |  |  9 |  | 10 |    |
|   |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |    |
|   +----+  +----+  +----+  +----+  +----+  +----+  +----+  +----+  +----+  +----+    |
|                                                                                     |    
+-------------------------------------------------------------------------------------+

I want these images to wrap and center automatically if the browser window is resized to be narrower.

|                                                                                     |    
|                   The more narrow window layout                                    |    
|                                                                                     |    
|                                                                                     |    
|                                                                                     |    
|                +----+  +----+  +----+  +----+  +----+  +----+                       |
|                |    |  |    |  |    |  |    |  |    |  |    |                       |
|                |  1 |  |  2 |  |  3 |  |  4 |  |  5 |  |  6 |                       |
|                |    |  |    |  |    |  |    |  |    |  |    |                       |
|                +----+  +----+  +----+  +----+  +----+  +----+                       |
|                                                                                     |    
|                        +----+  +----+  +----+  +----+                               |    
|                        |    |  |    |  |    |  |    |                               |    
|                        |  7 |  |  8 |  |  9 |  | 10 |                               |    
|                        |    |  |    |  |    |  |    |                               |    
|                        +----+  +----+  +----+  +----+                               |    
|                                                                                     |    
+-------------------------------------------------------------------------------------+

I've experimented with using tables, divs, and combinations of both to achieve this effect, but haven't had any success.

If anyone has any creative solutions or ideas, I would greatly appreciate it!

The website utilizes PHP, but I've been attempting to solve this problem using HTML and CSS without much luck.

htmlcss

Answer №1

Here is a snippet of code that may help you achieve your desired layout. Keep in mind that an example would have made it even easier to assist you.

.wrapper {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100vw;
    flex-wrap: wrap;
    overflow: auto;
}

.image {
    width: 150px;
    height: 150px;
}

Answer №2

To make sure your images are always centered within a container, wrap them in a div and apply the CSS properties display: flex and justify-content: center. This will keep your images at the center of the container. To handle any overflowing images, add flex-wrap: wrap to wrap them into a new line.

.robot {
  width: 150px;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

<div class="container">
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" class="robot">
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" class="robot">
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" class="robot">
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" class="robot">
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" class="robot">
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" class="robot">
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" class="robot">
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" class="robot">
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" class="robot">
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" class="robot">
</div>

If you need to create a gap on smaller screens like the example shown, use a media query to adjust the container's width. Inside the media query, reduce the width of the container and center it using margins:

.robot {
  width: 150px;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

@media only screen and (max-width: 800px) {
  .container {
    width: 50%;
    margin: auto;
  }
}

Link to CodePen example

Answer №3

Appreciate the helpful suggestions. I implemented the CSS recommendations provided by Louis.

   .robot {
  width: 150px;
  Padding: 5px;  
  }

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

I also made some additional adjustments to add padding around images for spacing and vertical alignment.

The only thing left is to ensure that the layout is responsive when resizing the window, particularly when making it more narrow. However, this is not a top priority right now.

Thanks once again!

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

What is the best way to dynamically change the color of my component depending on the prop passed to it?

I am facing an issue with the color of my component changing based on the value of the prop 'level'. Despite using states to set the backgroundColor, all components end up having the same color due to the state being altered for every comment. I ...

javascriptcssreactjsreact-nativestyles

Generate an HTML table dynamically from a PostgreSQL query

I am facing a challenge that may be simple for experienced individuals but is proving to be difficult for me as a newbie. The task at hand involves retrieving JSON data from a database query and displaying it in an HTML table using Node.js, Express, and Po ...

htmljsonpostgresqlexpress

Place items at the lower part of the container rather than the top

My <ul> has a fixed height and I want the <li> elements inside it to stack at the bottom instead of the top. I attempted using vertical-align: bottom on the <ul>, but that didn't have any effect. The <li> content may overflow ...

htmlcssflexbox

Issue with navigational button layout

I am facing an issue while designing my navigation menu with 4 circular items spaced about 20 px apart on the top right of the screen. I have managed to style each nav item as a circle, but when I try to position them in the upper right corner, only the 4t ...

htmlcssnavigation

Conceal Choices During Search using jQuery Select2

I'm having trouble figuring out how to make the Select2 plugin work for my specific color selection feature. My goal is to allow users to choose 5 colors from a list, including an "Other" option. When the user selects "Other", they should be able to ...

jquerycssjquery-select2

What is the best way to apply CSS to an image within a list item that is within an unordered list nested inside a specific

I've encountered an issue in my html file related to a navigation bar situated at the top of my page. The code snippet that initiates this navigation bar is as follows: <div class="“topNav"> <ul> <li><img src= ...

htmlcss

Difficulty in showcasing error on the website with JavaScript

I have recently developed a webpage that includes several input boxes and a submit button within a form as shown below: <form action="" method="post" name="password"> Upon clicking the submit button, a JavaScript function is triggered to validate i ...

javascripthtml

Issue with mouseMove function not aligning correctly with object-fit:contain CSS property

My current code allows users to select a color from an image when hovering over the pixel with the mouse. However, I am encountering an issue where the colors do not map correctly when using object-fit: contain for the image. The script seems to be treatin ...

javascripthtmlcssmousemoveobject-fit

What is the best method for accessing and showcasing images in an ionic app?

Having trouble displaying images after executing the following command: ionic run ios The default ionicframework template is being used with the sidemenu, and no changes have been made to the app directory structure. An inline css is being used to speci ...

htmlcssangularjsionic-framework

Tips on restricting dates to be equal to or earlier:

I have written a code to determine if two given dates are equal or not. The code should allow for the current date to be smaller than or equal to the provided date, but it should not allow for it to be greater. var date = '10-11-2015'; var toda ...

javascriptphpjqueryhtmldate

How can we use withStyles to customize the styling of a selected ListItem in ReactJS and Material UI?

I am seeking assistance in changing the style of a specific ListItem, similar to what is demonstrated in this Codesandbox. In the Codesandbox example, a global CSS stylesheet is utilized, but I prefer to implement the changes using the withStyle techniqu ...

cssreactjsmaterial-uijsshigher-order-components

Learn how to showcase the value of the selected radio button in AngularJS

To show the chosen radio button in the response div, make sure to hide the div if no option is selected. Check out the code below: <body ng-app="QuestionDisplayModule"> <form> <div ng-controller="QuestionDisplayController" ...

javascripthtmlangularjs

Creating an intricate table layout using AngularJS and the ngRepeat directive

I'm attempting to create a table similar to the one shown in the image below using HTML5. https://i.sstatic.net/DiPaa.png In this table, there is a multi-dimensional matrix with Class A and Class B highlighted in yellow. Each class has three modes ( ...

javascripthtmlcssangularjshtml-table

What is the best location to include my JavaScript code in WordPress?

Alright, so I've got this world map on one of my WordPress pages and here's an example of the code: <area onmousedown="modifyImage('world_map_01', './images/map/asia.jpg')" onmouseout="modifyImage('world_map_01', ...

javascripthtmlwordpress

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...

htmlcsstwitter-bootstraplaravel-5laravel-blade

Why might a responsive website automatically switch to mobile view?

My website has a responsive grid system that utilizes media queries with breakpoints. However, I am encountering an issue on IE8 where the "mobile version" of the site is being displayed as the default view even when the screen size is set to what should b ...

internet-explorercssresponsive-designmedia-queries

PHP is struggling to retrieve the value of "img src"

CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="./test2.php" method="POST"> ...

phphtml

Include HTML tag and class inside a JavaScript code block

A dynamic button is loaded when a certain condition in the JavaScript is met. Upon loading, I want to trigger a function (ClickMe) by clicking the button. However, I'm facing difficulty connecting the function with the button in my code. In my scrip ...

javascriptjqueryhtml

Designing Buttons and Titles for the Login Page

I'm currently working on developing a straightforward login page in react native and I've encountered some difficulties with styling. Does anyone have tips on how to center the text on the button? Also, is there a way to move the INSTARIDE text ...

javascriptcssreactjsreact-native

Is it a mistake in the Jquery logic or a syntax error?

Is there a logic or syntax error causing one of the options when clicking the radio to not display the corresponding tables with the same number of option dates? <style> #ch2 ,#ch3 ,#ch4 ,#ch5 ,#ch6 ,#ch7 ,#ch8 ,#ch9 ,#ch10 ,#c ...

jqueryhtml