Align 3 elements vertically in the same line, one on the left, one in the middle and one on the right

Question

i'm having a bad time trying to figure out how to align 3 divs vertically, inside another div. I want one div to be on the left, one on the right, and one aligned on the center. I'm using position relative, top 50% and transformY(-50%), to align everything vertically. When i tried this, they still stay one above another

i made this example on jsfiddle: https://jsfiddle.net/6jb4c5gz/8/

<section style="background-color: yellow">
  <div class="aaa" style="background-color:red;"></div>
  <div class="bbb" style="background-color:blue;"></div>
  <div class="ccc" style="background-color:green;"></div>
</section>

css:

body {
  padding: 0;
  margin: 0;
}

header{
   margin: 0 auto;
  text-align: center;
}
div {
  height: 30px;
  width: 30px;
}

1 {
  position: relative;
  top: 50%;
  transform: translateX(-50%);

}

can someone help me with this?

Edit: i think i wasn't really clear. I want the 3 divs to be in the same line, one on the left, one on the center, and one on the right, but aligned vertically

If thing A is aligned vertically with thing B, then thing A is directly underneath thing B such that some aspect of each is on the same vertical line. A column. I'm thus confused how you want to align 3 things vertically so that one is on the left, one is in the middle, and one is on the right. These things are not aligned — Caius Jard, Dec 22 '18 at 12:58

score 1 · Accepted Answer · answered Dec 22 '18 at 13:10

1

Should be as simple as:

header{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
header > div {
  height: 30px;
  width: 30px;
}

answered Dec 22 '18 at 13:10

Strelok

50,229
9
102
115

Tony Bui · Answer 2 · 2018-12-22T13:10:51.333

0

Use flex to get that result:

body {
  padding: 0;
  margin: 0;
}

section {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: column;
}

div {
  height: 30px;
  width: 30px;
}

.aaa {
  align-self: flex-start;
}

.bbb {
  align-self: center;
}

.ccc {
  align-self: flex-end;
}

<section style="background-color: yellow">
  <div class="aaa" style="background-color:red;"></div>
  <div class="bbb" style="background-color:blue;"></div>
  <div class="ccc" style="background-color:green;"></div>
</section>

edited Dec 22 '18 at 13:10

answered Dec 22 '18 at 13:00

Tony Bui

1,231
7
18

it didn't work :( test: https://jsfiddle.net/6jb4c5gz/13/ – Squall Dec 22 '18 at 13:05
Can you check again? It works on my PC and exactly like your demo – Tony Bui Dec 22 '18 at 13:07
Ah you change your code from to
. That is the reason!!
– Tony Bui Dec 22 '18 at 13:09
is the link i sent you working? is not working here, just checked again – Squall Dec 22 '18 at 13:09
on my code, in CSS I just change from "header" to "section", just change it and it will work fine – Tony Bui Dec 22 '18 at 13:12
Here is the link: https://codepen.io/tien-bui/pen/YdZoqw If it works for you, please accept my answer. Thanks – Tony Bui Dec 22 '18 at 13:17
1

This approach is unnecessarily too long and overcomplicating, not optimal. – VXp Dec 22 '18 at 13:22
What is your solution? – Tony Bui Dec 22 '18 at 13:35

score 0 · Answer 3 · answered Dec 22 '18 at 13:08

0

You can use Bootstrap 4 to do that :

.aaa, .bbb, .ccc {
  height: 30px;
  width: 30px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<section class="d-flex flex-column" style="background-color: yellow">
  <div class="align-self-start aaa" style="background-color:red;"></div>
  <div class="align-self-center bbb" style="background-color:blue;"></div>
  <div class="align-self-end ccc" style="background-color:green;"></div>
</section>

answered Dec 22 '18 at 13:08

Nicolas Roehm

688
1
8
15

Do not suggest to introduce a big library for something simple as that, unless the user already tagged the question with Bootstrap. – Asons Dec 22 '18 at 13:25
You are right, thanks @LGSon – Nicolas Roehm Dec 22 '18 at 23:35

score 0 · Answer 4 · answered Dec 22 '18 at 13:19

0

Simple solution

header{
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

https://jsfiddle.net/6jb4c5gz/28/

answered Dec 22 '18 at 13:19

Kamil Naja

6,267
6
33
47

score -1 · Answer 5 · answered Dec 22 '18 at 13:14

-1

try using CSS: text-align: center;

OR include "Bootstrap" and add class: pull-right, text-center

answered Dec 22 '18 at 13:14

rahim.nagori

636
8
20

Align 3 elements vertically in the same line, one on the left, one in the middle and one on the right

5 Answers5