Align a series of divs in the center with variable width and height

Question

Align a series of divs in the center with variable width and height

I have a dilemma with my large div that contains multiple thumbnails. I am looking to center the thumbnails within the div and have the overall div centered on the page. Additionally, I want the width of the div to be flexible so that all thumbnails can be seen on any screen resolution while also maintaining a centered position. How should I go about achieving this?

Here is what I have attempted so far:

<div id="container">
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
</div>

I have tried using the following CSS code for centering: The challenge lies in finding an alternative to float: left that would allow for central positioning and prevent the thumbnails from floating off-center when adjusting the browser window size.

#container{margin:auto;width:80%}
.thumb{padding:60px;float:left}

Is there a way to achieve something similar to float:center?

css html css-float center

Answer 1

Answer №1

First and foremost, assigning the same ID to all child <div> elements is not valid in HTML.

A better approach would be:

#container{margin:0 auto;width:80%;text-align:center}
#container div{padding:60px;display:inline}

<div id="container">
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
</div>

Alternatively, you could replace all <div> elements with <span> and remove display:inline from the CSS. Another option is to eliminate the need for <div> or <span> by adding padding directly to the img tag.

UPDATE: Based on comments from another answer, it seems my initial suggestion may not solve your issue. Are you aiming for this result? http://jsfiddle.net/9KqQN/1

#container{margin:0 auto;width:80%;text-align:center}
#container span{display:inline-block;text-align:left}

<div id="container">
    <span>
        <img />
        <img />
        <img />
        <br />
        <img />
    </span>
</div>

Answer 2

First and foremost, assigning the same ID to all child <div> elements is not valid in HTML.

A better approach would be:

#container{margin:0 auto;width:80%;text-align:center}
#container div{padding:60px;display:inline}

<div id="container">
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
</div>

Alternatively, you could replace all <div> elements with <span> and remove display:inline from the CSS. Another option is to eliminate the need for <div> or <span> by adding padding directly to the img tag.

UPDATE: Based on comments from another answer, it seems my initial suggestion may not solve your issue. Are you aiming for this result? http://jsfiddle.net/9KqQN/1

#container{margin:0 auto;width:80%;text-align:center}
#container span{display:inline-block;text-align:left}

<div id="container">
    <span>
        <img />
        <img />
        <img />
        <br />
        <img />
    </span>
</div>

Answer 3

Answer №2

To make the thumb divs act like regular text while still maintaining their box-like shape for sizing, simply apply display: inline-block to them:

#gallery {margin: auto; width: 70%; text-align: center;}
.thumb {height: 120px; width: 120px; padding: 20px; display-inline-block;}

Answer 4

To make the thumb divs act like regular text while still maintaining their box-like shape for sizing, simply apply display: inline-block to them:

#gallery {margin: auto; width: 70%; text-align: center;}
.thumb {height: 120px; width: 120px; padding: 20px; display-inline-block;}

Align a series of divs in the center with variable width and height

Answer №1

Answer №2

Similar questions

Styling a modal popup using session storage in CSS

Click to add a different template into the document

Tips for handling the !important declaration when creating a customized bootstrap theme

Personalize the bootstrap-vue styling within your Nuxt project

Take away the CSS class from an element after reCAPTCHA verification is complete in Next.js

BOOTSTRAP: changing the layout of panels in various sizes for mobile devices

Responsive design issues with Bootstrap 3 box layout

Engage in a conversation with a specific individual on the internet using node.js

Several validation checks - logic malfunction

Enhance your Magento store with a personalized layout update

Implementing CSS Media Print, tables elegantly transition to a fresh page

Proper Placement of Required Field Validator Messages

Is your JQuery Gallery experiencing issues with the next button function?

Content from PHP's unlink() function continues to persistently display

Exploring the Contents of an ASP ListView

Is there a way to dynamically set the width of a CSS property value in React? I'm looking for a solution that allows for flexibility in adjusting

the iframe is not properly displaying the embedded responsive page

Apply CSS styling to the v-html output

Having trouble displaying API JSON data in a Vue.js table component

Tips for aligning content vertically within a header: