Ensure that a div with fluid width remains consistently centered within another div

I have a bunch of boxes filled with content. The number of boxes in each row varies depending on the width of the browser window.

Is there a way to ensure that all the boxes are always horizontally centered on the page?

For guidance, you can check out this example: FIDDLE

HTML:

<body>
<div class="centered">
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment"><Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
</div>
</body>

CSS:

body {
    background-color:grey;
    margin:0px;
    padding:0px;
}
.centered {
    min-width:620px;
    max-width:1920px;
    margin-right:auto;
    margin-left:auto;
}
.segment {
    float:left;
    height:300px;
    width:300px;
    margin:5px;
    background-color:red;
}

I'm willing to consider JavaScript and jQuery solutions, but I'd prefer to utilize HTML and CSS if possible.

javascriptjqueryhtmlcss

Answer №1

Give this a try

.centered {
    min-width:640px;
    max-width:1920px;
    margin-right:auto;
    margin-left:auto;
    display:inline-block;
    text-align:center;
}
.segment {
    display:inline-block;
    height:300px;
    width:300px;
    margin:5px;
    background-color:red;
}

Check out the DEMO here

Answer №2

i engage in this activity

1 -

.centered { display:block; text-align:center; }

2 -

.segment

eliminate floating property

incorporate display:inline-block

enjoy the process

Answer №3

Resolving your issue with just HTML/CSS may be challenging, but a simple JS solution is provided below.

<body>
    <div class="centered">
        <span id="segmentList">
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
        </span>
    </div>
</body>

<script type="text/javascript">
    $('div.centered').width($('#segmentList').width());
<script>

Demo

Answer №4

To ensure proper alignment, adjust the width of the container based on different screen sizes:

http://jsfiddle.net/y6JpY/

@media screen { .centered { width: 620px } }
@media screen and (min-width: 930px) { .centered { width: 930px } }
@media screen and (min-width: 1240px) { .centered { width: 1240px } }
@media screen and (min-width: 1550px) { .centered { width: 1550px } }
@media screen and (min-width: 1860px) { .centered { width: 1860px } }

These numbers are multiples of 310 (300 + 5 pixels margin on each side).

This approach also prevents orphaned tiles from being centered at the end.

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

`Changing the output of a jQuery .load function`

I've created a webpage that pulls content from an article, but I'm looking to display only the first 100 words of the article. Currently, my page successfully loads the article using this code: $(function(){ $('#startOfArticle').l ...

javascriptjquery

Component in Next Js fails to pass props when using getInitialProps

I am facing some challenges with Next Js and could really use some assistance. We have a component where I am utilizing "getInitialProps" to pass props to it during the server-side rendering process. However, no matter what I try, the props do not seem to ...

javascriptreactjsnext.js

Are there any instances where CSS is overlooking certain HTML elements?

In the following HTML code snippet, the presence of the element with class ChildBar is optional: <div class="Parent"> <div class="ChildFoo"></div> <div class="ChildBar"></div> <!-- May ...

javascripthtmlcss

How can I link two separate webpages upon submitting a form with a single click?

Here is a snippet of my code: <form action="register.php" method="post"> <input type="text" name="uname"> <input type="submit" > </form> Within the register.php file, there are codes for connecting to a database. I am looking ...

javascriptphphtml

Generating a dynamic form by utilizing a JavaScript JSON object

I need assistance with creating an html form based on a JSON object’s properties. How can I target multiple levels to generate different fields and also drill down deeper to access field details? I am open to suggestions for alternative formats as well. ...

javascriptjqueryjsonobject

Change the value of input on onClick event in React

Although this may seem simple, it is a little confusing to me. I'm having trouble understanding why the input value in the following case is not being reset. handleReset() { this.setState({ data: "" }); } <button onClick={this.handleReset}>R ...

javascriptreactjsecmascript-6

The HTML element <a> can have both a href attribute and a onclick attribute

I'm currently facing a challenge with my project - I am trying to create a submenu that includes all sub-pages within a single HTML file. However, whenever I attempt to use both href and onclick, the functionality fails to work as intended. The only ...

javascriptjqueryhtmlcss

ACL - Utilize ACL in conjunction with the passport authentication system

I am experimenting with node_acl in combination with passport-local. Unfortunately, I am facing an issue when trying to secure the route for the admin-user '/admin', as it keeps redirecting me to the /login page. Below is a simplified version of ...

javascriptnode.jsexpressacl

The image spills out of its confines

Looking to create a dialogue box that fills the entire width and height of the screen? Want to divide its content into two sections - an image and a footer area with 2 rows of height? Struggling to contain the image within its designated space without over ...

htmlcsstailwind-css

What is causing my Fabric.js canvas to malfunction?

Here is the link to my JSFiddle project: http://jsfiddle.net/UTf87/ I am facing an issue where the rectangle I intended to display on my canvas is not showing up. Can anyone help me figure out why? HTML: <div id="CanvasContainer"> <canvas id ...

javascriptjquerycsscanvasfabricjs

"Utilizing Node.js to access modules with their absolute

My directory structure is as follows: -- app/ |- models/ |- user.js |- config.json I am trying to make my user.js file require the config.json. Currently, I am using require('/config') but it doesn't seem to be working. Can som ...

javascriptnode.jsexpressdirectory

Control the HTML button's state according to the information received from the server

I am currently working with datatable Jquery and using an ajax call to retrieve data from the server. Let's assume that the database consists of three attributes: "Attribute1, Attribute2, Status". Depending on the Status attribute, I need to enable or ...

javascriptjqueryhtmlajaxdatatables

Struggling to locate the Twitter direct message input box with Xpath in Selenium

I have been struggling to locate the textbox element using the find_element_by_xpath() method. Unfortunately, every time I try it, I receive an error stating that the element cannot be found. Here is the specific line of code in question: Despite attempti ...

pythoncssseleniumxpath

Out of Sync Promise Chain

I recently encountered an issue with promise chaining in JavaScript, specifically while working with Vue.js. Here is my code: I have an addItem function that inserts an item into the database. My goal is for this function to first insert the data into the ...

javascriptvue.jspromise

Transferring data from jQuery Ajax to PHP

I'm facing a challenge in retrieving a value back to PHP that I can manipulate and save to the database. It appears that using the GET method with jQuery AJAX is not yielding the desired results. Below is the PHP code snippet where I attempt to captur ...

phpjavascriptjqueryajax

Create a dynamic image positioned alongside text specifically designed for mobile devices

One of my challenges involves implementing a responsive image in Bootstrap (3.3.7): <div class="col-sm-2 text-center"> <img class="img-responsive center-block " src="img/1.png" style="max-width: <p>I would like to include some gua ...

csstwitter-bootstraplayout

"Revolutionizing Social Media Interaction with jQuery Ajax Like System

Trying to incorporate Facebook 'like' and 'dislike' functionality using jQuery has been quite a challenge for me. One issue I've encountered is that when the ajax call is made, it triggers a loading animation which persists even af ...

jqueryajaxfacebook

Adaptable/Responsive Layout

Thank you for taking the time to look at this post. I am currently working on gaining experience with html, CSS, and JavaScript in hopes of entering the Front End Developer field. Today, I encountered a few issues while working on this adaptive design. He ...

htmlcssresponsive-design

An HTML attribute with a blank value will not display the equals sign operator

jQuery can be used like this: $select.append('<option value="">All</option>'); This code appears to insert the element in HTML as follows: <option value>All</option> However, what is intended is to append the elemen ...

javascriptjqueryhtml

Saving Pictures in Database Without Using jQuery

Hey there fellow developers, I'm currently immersed in a web project that involves reconstructing a social media platform similar to snapchat. To capture images, I am utilizing my webcam with JavaScript and saving the image data to a variable named i ...

javascriptphphtmlajax