Is there a simpler method to center a multitude of divs on the page?

Question

Is there a simpler method to center a multitude of divs on the page?

Here is the code I'm working with:

<div id="divone"><div class="content">Content here</div></div>
<div id="divtwo"><div class="content">Content here</div></div>
<div id="divthree"><div class="content">Content here</div></div>
<div id="divfour"><div class="content">Content here</div></div>
<div id="divfive"><div class="content">Content here</div></div>
<div id="divsix"><div class="content">Content here</div></div>

This is the CSS being used:

.content { width:960px; margin:auto;}
#divone { background-image: url(bg1.png); background-repeat: repeat;}
#divtwo { background-image: url(bg2.png); background-repeat: repeat;}
#divthree { background-image: url(bg1.png); background-repeat: repeat;}
#divfour { background-image: url(bg1.png); background-repeat: repeat;}
#divfive { background-image: url(bg1.png); background-repeat: repeat;}
#divsix { background-image: url(bg1.png); background-repeat: repeat;}

I created a jsfiddle example to demonstrate my workflow http://jsfiddle.net/64H5p/

Is there a more efficient method to align the divs in the center without adding the .content class each time? My project involves around 100 of these on every page.

html css

Answer 1

Answer №1

Give this css code a shot

div[id^='div'] div { 
  width:120px;
  margin:auto;
}

Check out the DEMO here

Answer 2

Give this css code a shot

div[id^='div'] div { 
  width:120px;
  margin:auto;
}

Check out the DEMO here

Answer 3

Answer №2

To achieve a centered layout with full-width divs, consider creating a parent container div and applying margin: 0 auto to center it. Then place individual child divs inside, each set to 100% width.

Answer 4

To achieve a centered layout with full-width divs, consider creating a parent container div and applying margin: 0 auto to center it. Then place individual child divs inside, each set to 100% width.

Answer 5

Answer №3

Have you considered implementing text-align:center; directly on the surrounding divs (divone, divtwo, etc.) instead?

Answer 6

Have you considered implementing text-align:center; directly on the surrounding divs (divone, divtwo, etc.) instead?

Answer 7

Answer №4

 #divone, #divtwo, #divthree, #divfour, #divfive, #divsix {
     width:960px; 
     margin:0 auto;
 }

You have the option to merge selectors for efficiency.

In case you still prefer to include a div within the #divone, #divtwo, you can utilize a selector like so:

#divone div, #divtwo div, #divthree div, ... {}

Check out the Demo here

Answer 8

 #divone, #divtwo, #divthree, #divfour, #divfive, #divsix {
     width:960px; 
     margin:0 auto;
 }

You have the option to merge selectors for efficiency.

In case you still prefer to include a div within the #divone, #divtwo, you can utilize a selector like so:

#divone div, #divtwo div, #divthree div, ... {}

Check out the Demo here

Answer 9

Answer №5

Check out the jfiddle I created just for you:

http://jsfiddle.net/7L9Kc/

Feel free to take a look!

Alternatively, you can view it here:

<div class="container">
<div id="boxone">Content goes here</div>
<div id="boxtwo">Content goes here</div>
<div id="boxthree">Content goes here</div>
<div id="boxfour">Content goes here</div>
<div id="boxfive">Content goes here</div>
<div id="boxsix">Content goes here</div>
</div>

.container {margin:auto;}
.container div{text-align: center;}
#boxone { background-image: url(image1.png); background-repeat: repeat; background-color:red;}
#boxtwo { background-image: url(image2.png); background-repeat: repeat;background-color:blue;}
#boxthree { background-image: url(image1.png); background-repeat: repeat;background-color:yellow;}
#boxfour { background-image: url(image1.png); background-repeat: repeat;background-color:green;}
#boxfive { background-image: url(image1.png); background-repeat: repeat;background-color:pink;}
#boxsix { background-image: url(image1.png); background-repeat: repeat;background-color:grey;}

If you want only certain boxes to be centered, simply add a class to those specific divs that you wish to align to the center

For example:

<div id="boxone" class="centered">Content goes here</div>

.centered {margin: 0px auto;}

Answer 10

Check out the jfiddle I created just for you:

http://jsfiddle.net/7L9Kc/

Feel free to take a look!

Alternatively, you can view it here:

<div class="container">
<div id="boxone">Content goes here</div>
<div id="boxtwo">Content goes here</div>
<div id="boxthree">Content goes here</div>
<div id="boxfour">Content goes here</div>
<div id="boxfive">Content goes here</div>
<div id="boxsix">Content goes here</div>
</div>

.container {margin:auto;}
.container div{text-align: center;}
#boxone { background-image: url(image1.png); background-repeat: repeat; background-color:red;}
#boxtwo { background-image: url(image2.png); background-repeat: repeat;background-color:blue;}
#boxthree { background-image: url(image1.png); background-repeat: repeat;background-color:yellow;}
#boxfour { background-image: url(image1.png); background-repeat: repeat;background-color:green;}
#boxfive { background-image: url(image1.png); background-repeat: repeat;background-color:pink;}
#boxsix { background-image: url(image1.png); background-repeat: repeat;background-color:grey;}

If you want only certain boxes to be centered, simply add a class to those specific divs that you wish to align to the center

For example:

<div id="boxone" class="centered">Content goes here</div>

.centered {margin: 0px auto;}

Is there a simpler method to center a multitude of divs on the page?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Tips for smoothing out jagged edges in conic gradients

Getting session data from a separate page tutorial in PHP

How can one efficiently implement a recursive dynamic expanding navigation bar in Angular, and what is the best method to toggle its menu items effectively?

Creating a consistent height for Bootstrap 5 Carousel items with varying sizes

What is the best way to create a button that will trigger a modal window to display a message?

Sort the parent by the number present in the child item using jQuery

What is the best way to retrieve the index of the chosen option from a select element in Angular when

Accordion section appears on the webpage as it is loaded

AngularJS directive for incorporating additional directives lacks functionality

Issue with modal not being able to close the embedded video iframe

Preventing Div items from rearranging during size transitions using toggleClass

Django has the ability to display images from static files, however, it is not capable of

Finding the closest button using Selenium in Python

In a trivia game implemented in JavaScript, only the initial response from an array of objects will be considered as true, instead of focusing on the correct answer

Tips on creating reusable scoped styles for 3 specific pages in Vue.js without impacting other pages

How can I display a formatted preview of files that have been read using FileReader in Javascript?

A tool that enhances the visibility and readability of web languages such as HTML, PHP, and CSS

What is the best way to align 3 divs next to each other with spacing and borders?

Assistance with CSS Flexbox: How to align items in a grid format (images, titles, text)

How Django manages the "multiple" tag in HTML5 handling