Tips for Aligning a Collection of Relative Positioned Divs within a Parent Relative Positioned Div

Struggling to dynamically center a group of relative positioned divs within a parent div that is also relative positioned.

The parent div has a width of 620px, while the child divs are each 200px wide. There could be 1 to 3 child divs per line, which is why I am attempting to center the group of child divs within the parent div dynamically. For instance, if there is only one child div, it should be centered in the parent div, or if there are two child divs, they should both be centered.

I initially considered using inline-block for the child divs, but complications arose from the absolute positioning of other divs inside them, rendering inline-block ineffective.

This is my current css implementation, and a working example can be seen here: https://jsfiddle.net/y3ghpkvs/

.parentClass {
    position: relative;
    width: 620px;
    height: 500px;
    background-color: gray;
}

.childClass {
    position: relative;
    width: 200px;
    height: 400px;
    float: left;
    margin-left: 5px;
    background-color: white;
}

.insideChildDiv1 {
    position: absolute;
    width: 100%;
    height: 95px;
    top: 0;
    left: 0;
    background-color: black;
    color: white;
    text-align: center;
    line-height: 100px;
}

.insideChildDiv2 {
    position: absolute;
    width: 100%;
    height: 200px;
    top: 100px;
    left: 0;
    background-color: green;
}

.insideChildDiv3 {
    position: absolute;
    width: 100%;
    height: 95px;
    bottom: 0;
    left: 0;
    color: white;
    text-align: center;
    line-height: 100px;
    background-color: black;
}

If anyone has tips on how to properly center the 2 childClass divs inside the parentClass div, please share! Thanks!

Answer №1

Method 1: Implementing Flexbox

Consider utilizing flex CSS. By using flex, you can easily align items vertically or horizontally to the parent container.

Utilize justify-content: center; to centrally align the divs.

Revised Fiddle Link

.parentContainer {
  width: 620px;
  background-color: gray;
  display: flex;
  justify-content: center;
  margin: auto;
  flex-wrap: wrap;
}

.childElement {
  width: 200px;
  height: 400px;
  background-color: white;
  position: relative;
  margin: 3px;
}

.innerChildDiv1 {
  position: absolute;
  width: 100%;
  height: 95px;
  top: 0;
  left: 0;
  background-color: black;
  color: white;
  text-align: center;
  line-height: 100px;
}

.innerChildDiv2 {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 100px;
  left: 0;
  background-color: green;
}

.innerChildDiv3 {
  position: absolute;
  width: 100%;
  height: 95px;
  bottom: 0;
  left: 0;
  color: white;
  text-align: center;
  line-height: 100px;
  background-color: black;
}
<div class="parentContainer">
  <div class="childElement">
    <div class="innerChildDiv1">George</div>
    <div class="innerChildDiv2"></div>
    <div class="innerChildDiv3">CEO</div>
  </div>
  <div class="childElement">
    <div class="innerChildDiv1">John</div>
    <div class="innerChildDiv2"></div>
    <div class="innerChildDiv3">Vice President</div>
  </div>
  <div class="childElement">
    <div class="innerChildDiv1">John</div>
    <div class="innerChildDiv2"></div>
    <div class="innerChildDiv3">Vice President</div>
  </div>
  <div class="childElement">
    <div class="innerChildDiv1">John</div>
    <div class="innerChildDiv2"></div>
    <div class="innerChildDiv3">Vice President</div>
  </div>
</div>

Method 2: Utilizing Inline-Block Display

.parentContainer {
  width: 620px;
  background-color: gray;
  margin: auto;
  text-align: center;
}

.childElement {
  width: 200px;
  height: 400px;
  background-color: white;
  position: relative;
  margin: 4px 0;
  display: inline-block;
  margin-left: 2px;
}

.innerChildDiv1 {
  position: absolute;
  width: 100%;
  height: 95px;
  top: 0;
  left: 0;
  background-color: black;
  color: white;
  text-align: center;
  line-height: 100px;
}

.innerChildDiv2 {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 100px;
  left: 0;
  background-color: green;
}

.innerChildDiv3 {
  position: absolute;
  width: 100%;
  height: 95px;
  bottom: 0;
  left: 0;
  color: white;
  text-align: center;
  line-height: 100px;
  background-color: black;
}
<div class="parentContainer">
  <div class="childElement">
    <div class="innerChildDiv1">George</div>
    <div class="innerChildDiv2"></div>
    <div class="innerChildDiv3">CEO</div>
  </div>
  <div class="childElement">
    <div class="innerChildDiv1">John</div>
    <div class="innerChildDiv2"></div>
    <div class="innerChildDiv3">Vice President</div>
  </div>
  <div class="childElement">
    <div class="innerChildDiv1">John</div>
    <div class="innerChildDiv2"></div>
    <div class="innerChildDiv3">Vice President</div>
  </div>
  <div class="childElement">
    <div class="innerChildDiv1">John</div>
    <div class="innerChildDiv2"></div>
    <div class="innerChildDiv3">Vice President</div>
  </div>
  <div class="childElement">
    <div class="innerChildDiv1">John</div>
    <div class="innerChildDiv2"></div>
    <div class="innerChildDiv3">Vice President</div>
  </div>
</div>

I trust this information proves useful for your project!

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

Switch the orientation of the dropdown menu from vertical to horizontal in CSS

After downloading a CSS dropdown menu from purecss.menus.com, I attempted to modify it by changing the main menu to display horizontally instead of vertically. However, I am now struggling to figure out which part of the CSS code needs to be adjusted in or ...

What is the best way to crop an image to focus solely on the center portion?

Using Bootstrap 3, how can I display an image cropped in a .col-sm-6 grid column? The image is 720px wide. Typically, with the .img-responsive class, the image will resize proportionally when the display size changes. However, I want to crop the left and ...

Adjusting Media Queries according to the browser window's zoom level

Is there a way to detect the browser width dynamically? For instance, can I adjust the CSS styling based on zoom adjustments like ctrl + or ctrl -? By "box," I am referring to a perfectly square shape. So, when the browser width is 100%, I want a layout wi ...

Angular dropdown tooltip for overflowing text

Here is the select element in question: <select id="select-full" title="Make selection" class="form-control form-custom input-sm" name="Select" ng-model="form.select" ng-options="select.displayName as select.text for select in selec ...

Implementing Object Value Assignment to an Element Using jQuery

I recently received a set of data via an API request: https://i.stack.imgur.com/YGe2D.jpg In order to display this data as selectable options, I included the following code snippet in my AJAX script: $.each($(value.routes), function(index, route){ $ ...

Customizing the appearance of all Angular components with styles.scss

Is there a way to create a universal style in styles.scss that can be applied to all Component selectors (e.g. app-componentA, app-componentB ...)? I understand that I could manually add the style to each selector, but I am concerned that it may be forgot ...

SVG set to fill currentColor but does not dynamically change in high contrast mode

I'm currently working with in-line SVGs on my website. Here's an example: svg { fill: currentColor; } <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="-13 0 120 30" width="74px"> < ...

Exploring the functionality of CodePen's code editor in relation to developing a 2D shooting game

Recently, I created a straightforward 2D shooter game with all the code neatly organized in a single HTML file: (file_gist). When I tested the game in my chrome browser, everything worked flawlessly according to my intentions. However, upon transferring th ...

Change in navigation bar appearance on scroll down

I am attempting to create a fixed navigation bar by customizing the Bootstrap CSS file. The goal is to change the navbar's color and make it stick to the top when scrolling down. Although I followed the instructions in this article, the JS code I add ...

Assign a class to the checkbox of the first parent

I have a set of checkboxes generated using a for loop. I want the first checkbox to act as a parent, and all other checkboxes should act as children. When the parent checkbox is clicked, all child checkboxes should be checked. Although I have code to achi ...

Converting a JS string into HTML markup

I recently developed a basic web application to manage telnet connections with routers using Node.js, Express, and WebSockets. After establishing a connection, the terminal stream is transmitted through a websocket as UTF-8 strings. However, my current is ...

Why does this element on Safari have a focus outline appearing even before it is clicked?

The issue is occurring specifically in Safari, and you can see it firsthand by clicking the "chat now" button located in the lower right corner of the screen: Upon clicking the "chat now" button, the chat window's minimize button displays a focus out ...

Combining days and months in a date time using PHP

I am looking to create a textBox where users can input a date and time, followed by selecting an option from a dropdown menu that triggers a calculation. For instance: if ($exampleMonth === 11 && $exampleDay > 30) { $exampleMonth = 12; ...

Beginning the phone application using either HTML5 or Cordova

Is there a way to use either HTML5 or Cordova (PhoneGap) to initiate a call to a phone number? I am looking to create a button that says "Call 555-555-5555", and when clicked, it opens the phone app on the device with that specific number. ...

What is the best way to include a JavaScript variable within CSS styling?

I am currently implementing a dropdown menu system where the image of a parent div changes on mouse hover over a link, and reverts back when the mouse moves away. I have this functionality set up using a variable in my HTML code. Is there a way for me to m ...

Attempting to generate a cost estimator, however, no results are showing up upon clicking the calculate button

Having based my code on a template and being fairly new to Javascript, I expected everything to work smoothly. However, upon testing it, I encountered an issue where nothing was displayed in the results boxes. My goal is to develop a pricing calculator th ...

Utilizing Regular Expressions in Vb.net for extracting telephone numbers

I have developed a code to extract mobile numbers from a web link. I have three links in a list box and I am extracting their source code using the following code. However, when I try to use RegEx to Extract Phone Numbers, I keep getting the same number re ...

Tips for adding a border to a 3D pie chart in Highcharts

I created a 3D pie chart using the Highchart plugin and wanted to add borders to each portion. I tried adding the following code: borderWidth: 4, borderColor: "red" within the plotOptions: pie: section. However, I noticed that the portions were getting b ...

What is the best way to transfer an object property to an event handler function for executing DOM manipulation tasks?

I am working on a React-rendered HTML page that displays a list of objects representing websites. I have successfully stored these objects in memory and can show them in a long list on the page without any issues. Recently, I added a button for each objec ...

"Can the form and action occur on the same page, or should they be

When it comes to form actions, what is more effective: having the action on the same page or a different page? See the sample code below: <form action="act.php"> html code </form> <form action=""> html code </form> < ...