How to center a flex item?

Question

I want ABCD on the left and DATE should be in the center. How to achieve this?

.flex-items {
  display: flex;
  justify-content: flex-start;
  padding-left: 17px;
}

.abcd1 {}

.date1 {
  /*this item should be in the center.*/
}

<div class="flex-items">
  <div class="abcd1">ABCD</div>
  <div class="date1">DATE</div>
</div>

Abhishek Shah · Accepted Answer · 2018-03-22T10:22:45.553

3

Try this code

.flex-items {

  display: flex;
  justify-content: flex-start;
  padding-left: 17px;
}

.abcd1 {

}

.date1 {
    margin-left: auto;
    margin-right: auto;
}

<div class="flex-items">

<div class="abcd1">ABCD</div>
<div class="date1">DATE</div>

</div>

edited Mar 22 '18 at 10:22

answered Mar 22 '18 at 10:09

Abhishek Shah

436
1
3
12

Great, done thanks :) – Aditya Mar 22 '18 at 10:12
1

text-align is useless here – Temani Afif Mar 22 '18 at 10:18
yes, we can remove text-align here. – Aditya Mar 22 '18 at 10:21
Yes i have removed it. – Abhishek Shah Mar 22 '18 at 10:23
This solution doesn't center the DATE on the full line. It centers the DATE only in the *remaining space* of the line. DATE is off-center (to the right) by the length of the ABCD element. https://jsfiddle.net/5wm9e0d0/1 – Michael Benjamin Mar 22 '18 at 14:58

Gerard · Answer 2 · 2018-03-22T10:58:56.527

0

See below. Hope this helps.

.flex-items {
  display: flex;
  padding-left: 17px;
  text-align: center;
}

.date1 {
  flex: 1;
}

<div class="flex-items">
  <div class="abcd1">ABCD</div>
  <div class="date1">DATE</div>
</div>

edited Mar 22 '18 at 10:58

answered Mar 22 '18 at 10:11

Gerard

15,418
5
30
52

margin-right is useless here – Temani Afif Mar 22 '18 at 10:19
Thanks @TemaniAfif. Code adjusted. – Gerard Mar 22 '18 at 10:59

score 0 · Answer 3 · answered Mar 22 '18 at 11:49

Text-align: center works when there is a width provided. This also works:

.flex-items {
     display: flex;
     justify-content: flex-start;
     padding-left: 17px;
}
.abcd1 {
          
}     
.date1 {
     /*this item should be in the center.*/
     text-align: center;
     width: 100%;
}

    <div class="flex-items">
    <div class="abcd1">ABCD</div>
    <div class="date1">DATE</div>
</div>

How to center a flex item?

3 Answers3