How to get this div to align center?

This question already has an answer here:

Flexbox: center horizontally and vertically 8 answers

---

使用justify-content: center到.course-flex-row-2

.course-flex-container {
  display: flex;
  flex-direction: column;
  margin: 5px 5px 5px 5px;
  background-color: red;
}

.course-flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.course-flex-row-2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<div class="course-flex-container">
  <div class="course-flex-row">
    <div>edit</div>
    <div>delete</div>
  </div>
  <div class="course-flex-row-2">
    <div>Read Chapter 1 to 3</div>
  </div>
  <div class="course-flex-row">
    <div>Blaw 3100</div>
    <div>Due Date: 6/29/2017</div>
  </div>
</div>

---

any of the DIVs that you would like to center the content of add

margin: auto;

to the CSS. You can also adjust the top and bottom margin by using

margin: 10px auto; //center with 10px top margin.

or

margin: 10px 10px auto; //center with 10px margin at top and bottom.

however....

text-align: center;

would center text only, not elements inside the div.

---

Change Like this :

First change className to class .

After Change Like This:

.course-flex-row-2{
    display: flex;<-----------------Remove
    flex-direction: row;
    text-align: center;
}

.course-flex-row-2 div {<--------------Add
  display: inline-block;
}

.course-flex-container {
    display: flex;
    flex-direction: column;
    margin: 5px 5px 5px 5px;
    background-color: red;
}

.course-flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.course-flex-row-2{
    flex-direction: row;
    text-align: center;
}

.course-flex-row-2 div{
  display: inline-block;
}

<div class="course-flex-container">
  <div class="course-flex-row">
    <div>edit</div>
    <div>delete</div>
  </div>
  <div class="course-flex-row-2">
    <div>Read Chapter 1 to 3</div>
  </div>
  <div class="course-flex-row">
    <div>Blaw 3100</div>
    <div>Due Date: 6/29/2017</div>
  </div>
</div>

链接地址: http://www.djcxy.com/p/76014.html

上一篇: 如何在div中水平和垂直放置图像

下一篇: 如何让这个div对齐中心？