如何居中弹性项目？

Question

我想要 ABCD 在左边，DATE 应该在中间。如何实现？

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

Answer 1

试试这个代码

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

Answer 2

见下文。希望这有帮助。

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

Answer 3

Text-align：当提供宽度时居中有效。这也有效：

.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?

html

css

centering

flexbox