CODEWITHSUNDEEP
htmlcssflexbox
Dharmesh Vekariya
Dharmesh Vekariya

Reputation: 1156

Right-align a flex item and vertically center its content

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>

Upvotes: 2

Views: 78

Answers (4)

Michael Benjamin
Michael Benjamin

Reputation: 372109

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:

Upvotes: 3

MumfordJw
MumfordJw

Reputation: 186

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/

Upvotes: 3

xrobert35
xrobert35

Reputation: 2566

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

Upvotes: 0

ashish singh
ashish singh

Reputation: 6914

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>

Upvotes: 0

Related Questions