Search code examples
htmlcssflexboxcentering

How to center a flex item?

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>

Solution

  • 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>