html - How to align element in div independently of the others in css?

Question

(This question already has answers here): question from:https://stackoverflow.com/questions/66056346/how-to-align-element-in-div-independently-of-the-others-in-css

Answer 1

Can you please check the below code link? Hope it will work for you. We can solve this issue with the help of flex, without using position: absolute;.

1. You need to remove justify-content: center; from the .container.
2. We have wrapped all info items in one div like .content and give margin:auto; to them.

Please refer to this link: https://jsfiddle.net/yudizsolutions/z71rbu6o/7/

.container {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 35.5%;
  height: 550px;
  padding: 20px;
  margin: 20px;
  background: #000;
}
h1 {
  color: #fff;
}
.content {
  margin: auto;
}
.info {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  margin: 0 0 15px 0;
  color: #fff;
}
.info h2,
.info p {
  margin: 0;
}

<div class="container">
  <h1>INFO</h1>
  <div class="content">
  <div class="info">
      <h2>Age</h2>
      <p>20</p>
    </div>
    <div class="info">
      <h2>Adress</h2>
      <p>Wolna 23, Warszawa</p>
    </div>
    <div class="info">
      <h2>Email</h2>
      <p>[email protected]</p>
    </div>
    <div class="info">
      <h2>Phone</h2>
      <p>669 133 777</p>
    </div>
  </div>
</div>