Right-align a flex item and vertically center its content

Question

How to set right box position right using flex and also colorful text vertically centered in the box?

.box {
  display: flex;
}
.box .left-box {
  width: 30%;
}
.box .right-box {
  width: 30%;
  background-color: #3e9388;
}

<div class="box">
  <div class="left-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
  <div class="right-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

Michael Benjamin · Accepted Answer · 2018-09-14T11:44:04.457

Use a nested flex container so you can apply flex alignment properties to the text.

.box {
  display: flex;
  
  /* new */
  justify-content: space-between; /* for right-alignment */
}
.box .left-box {
  width: 30%;
}
.box .right-box {
  width: 30%;
  background-color: #3e9388;
  
  /* new */
  display: flex;
  align-items: center;
}

<div class="box">
  <div class="left-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
  <div class="right-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

More details here:

I am probably wrong but I think we need to also right align the green box. (not the downvoter) — Temani Afif, Sep 14 '18 at 11:42
I think you're correct. The original question was not entirely clear. I edited the q for clarity (and assumed intent) and updated my answer. OP can correct me if I'm wrong. @TemaniAfif — Michael Benjamin, Sep 14 '18 at 11:45

score 3 · Answer 2 · answered Sep 14 '18 at 11:39

See below fiddle if you wanted the green box to be position to the right, also:

.box {
  display: flex;
  justify-content: space-between;
}
.box .left-box {
  width: 30%;
}
.box .right-box {
  align-items: center;
  display: flex;
  width: 30%;
  background-color: #3e9388;
}

http://jsfiddle.net/4z0aqvxk/4/

score 0 · Answer 3 · answered Sep 14 '18 at 11:38

you can try this. Never hesitate to use flex inside flex

.box {
  display: flex;
  justify-content: space-between;
}
.box .left-box {
  width: 30%;
}
.box .right-box {
  width: 30%;
  background-color: #3e9388;
  display: flex;
  align-items: center;
}

<div class="box">
  <div class="left-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
  <div class="right-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

score 0 · Answer 4 · answered Sep 14 '18 at 11:39

0

You can first add "flex-direction: row" to the box so each element will be align horizontaly

Then you can play with "justify-content: center" and "align-items" attribut

answered Sep 14 '18 at 11:39

xrobert35

2,330
1
13
15

This could be improved by providing examples in a code snippet – OliverRadini Sep 14 '18 at 13:49

Right-align a flex item and vertically center its content

4 Answers4