Tips for aligning all positioned elements in a div

Question

Tips for aligning all positioned elements in a div

I am trying to center absolute items inside my .child_div element with a green background. How can I do this properly?

.parent_div {
  position: relative;
  background: lightgreen;
  width: 1200px;
  margin: auto;
}

.child_div {
  position: relative;
  height: 200px;
  margin: auto;
  display: flex;
  justify-content: center;
}

.item {
  width: 80px;
  height: 80px;
  position: absolute;
}

.item1 {
  background: orange;
  left: 20%;
}

.item2 {
  background: yellow;
  left: 25%;
}

.item3 {
  background: blue;
  left: 30%;
}

.item4 {
  background: red;
  left: 35%;
}

<div class="parent_div">
  <div class="child_div">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
  </div>
</div>

html css

Answer 1

Answer №1

By eliminating the position: absolute and unnecessary margin and left values, you are able to achieve the desired outcome.

Update - For overlapping elements, consider utilizing position: relative along with adjusting the left values.

.parent_div {
  background: lightgreen;
  width: 1200px;
}

.child_div {
  height: 200px;
  display: flex;
  justify-content: center;
}

.item {
  width: 80px;
  height: 80px;
}

.item1 {
  background: orange;
}

.item2 {
  background: yellow;
}

.item3 {
  background: blue;
}

.item4 {
  background: red;
  position: relative;
  left: -20px;
}

<div class="parent_div">
  <div class="child_div">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
  </div>
</div>

Answer 2

By eliminating the position: absolute and unnecessary margin and left values, you are able to achieve the desired outcome.

Update - For overlapping elements, consider utilizing position: relative along with adjusting the left values.

.parent_div {
  background: lightgreen;
  width: 1200px;
}

.child_div {
  height: 200px;
  display: flex;
  justify-content: center;
}

.item {
  width: 80px;
  height: 80px;
}

.item1 {
  background: orange;
}

.item2 {
  background: yellow;
}

.item3 {
  background: blue;
}

.item4 {
  background: red;
  position: relative;
  left: -20px;
}

<div class="parent_div">
  <div class="child_div">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
  </div>
</div>

Answer 3

Answer №2

If you want to achieve this effect, use display:inline-block and text-align: center.

.parent_div {
  background: lightgreen;
  width: 1200px;
  text-align:center;
}

.child_div {
  height: 200px;
  display: inline-block;
}

.item {
  width: 80px;
  height: 80px;
  float: left;
}

.item1 {
  background: orange;
  left: 20%;
}

.item2 {
  background: yellow;
  left: 25%;
}

.item3 {
  background: blue;
  left: 30%;
}

.item4 {
  background: red;
  left: 35%;
}

<div class="parent_div">
  <div class="child_div">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
  </div>
</div>

Answer 4

If you want to achieve this effect, use display:inline-block and text-align: center.

.parent_div {
  background: lightgreen;
  width: 1200px;
  text-align:center;
}

.child_div {
  height: 200px;
  display: inline-block;
}

.item {
  width: 80px;
  height: 80px;
  float: left;
}

.item1 {
  background: orange;
  left: 20%;
}

.item2 {
  background: yellow;
  left: 25%;
}

.item3 {
  background: blue;
  left: 30%;
}

.item4 {
  background: red;
  left: 35%;
}

<div class="parent_div">
  <div class="child_div">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
  </div>
</div>

Tips for aligning all positioned elements in a div

Answer №1

Answer №2

Similar questions

Problem with responsive design on iPhone

Offspring element overrides styling of its parent

What is the solution for resolving the delay between a variable in HTML and the controller in Angular 4?

Converting JSON data retrieved from a URL into HTML format

Is there a way to exclusively show the browser name and version while excluding any supplementary details with 'HTTP_USER_AGENT'?

What causes the variation in results when I input CSS directly into the head section versus linking it from a separate .css file?

Redirecting after executing JavaScript code

Text that is curving around a D3.js pie chart

I encountered an issue while attempting to utilize a JavaScript script - I received an error message stating "Uncaught ReferenceError: jQuery is not defined."

Mapping variables to attributes in polymers

Utilizing graphics within the Atom text editor

Try incorporating the <code> tags or a similar method in ReactJS when using JSX

Avoiding leaps through the use of dynamic pictures?

Burger menu floating above container block element

Mobile view div failing to fill remaining space

Display an image with only a portion visible, no canvas, no frame, and no need

Stretch the div to the right and maintain its horizontal width

"I'm experiencing an issue where my JSON data is not displaying in the browser when I run the code

Navigating through each element of an array individually by using the onClick function in React

Creating a checklist using HTML and CSS can be achieved by utilizing the <span> element and