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

Question

So i've got div looking like this. My question is how can I align h1 so it stays always on top of this div and rest of content is aligned in the middle of div like how it is now?

HTML:

<div class="container">
   <h1>INFO</h1>
   <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>lorem@gmail.com</p></div>
   <div class="info"><h2>Phone</h2><p>669 133 777</p></div>
</div>

CSS:

.container
{
    align-items: center;
    justify-content: center;
    display:flex;
    flex-direction: column;
    width: 35.5%;
    height: 550px;
    padding: 20px;
    margin: 20px;
}

.info
{
    align-items: center;
    justify-content: center;
    display:flex;
    flex-direction: column;
    margin: 0 0 15px 0;
}

whats the problem exactly? your code do this for you already — Ako, Feb 05 '21 at 01:35

score 1 · Accepted Answer · answered Feb 05 '21 at 06:21

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;.

You need to remove justify-content: center; from the .container.
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>lorem@gmail.com</p>
    </div>
    <div class="info">
      <h2>Phone</h2>
      <p>669 133 777</p>
    </div>
  </div>
</div>

It works how I wanted, thank you so much :) – Eron Feb 05 '21 at 17:13 — Eron, Feb 05 '21 at 17:13
We are glad that, our solution helped you... – Yudiz Solutions Feb 06 '21 at 05:08 — Yudiz Solutions, Feb 06 '21 at 05:08

Ako · Answer 2 · 2021-02-05T03:10:29.670

if you want to stick it to the top add this:

h1{
  position: absolute;
  top: 0;
}

Edit: there are a lot of ways, but in all of them you must to take the header out of the flexbox. You can do it like this:

  .container {
    box-sizing: border-box;
    position: relative;
    width: 35.5%;
    height: 600px;
    background-color: coral;
    padding: 20px;
  }

  .info {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    margin: 0 0 15px 0;
  }

  .wrapper {
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    height: 450px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: cadetblue;
    width: 100%;

  }

  .header {
    position: absolute;
    top: 0;
    left: 50%;
    margin-top: 0;
    transform: translateX(-50%);
    background-color: cadetblue;
  }

  p {
    margin: 0.5rem;
  }

<div class="container">
  <h1 class="header">INFO</h1>
  <div class="wrapper">
    <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>lorem@gmail.com</p>
    </div>
    <div class="info">
      <h2>Phone</h2>
      <p>669 133 777</p>
    </div>
  </div>
</div>

But I have other divs similiar to the one i put here. This would take theirs h1's and put them on the top of whole site. I want them to be at the top of individual div in which they are in. Hope you understand me :) — Eron, Feb 05 '21 at 01:57
yes, I understand. but using just a flexbox you can not do that all. look at the edited answer. — Ako, Feb 05 '21 at 03:12

score 0 · Answer 3 · edited Feb 05 '21 at 02:46

0

Try adding this:

.container h1{
    position: absolute;
    top: 0vh;
}

edited Feb 05 '21 at 02:46

Joundill

6,828
12
36
50

answered Feb 05 '21 at 02:45

Mr Kowalski

26
5

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

3 Answers3