如何让这个div对齐中心？

这个问题在这里已经有了答案：

Flexbox：水平和垂直居中8个答案

---

使用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>

---

您想要将添加的内容居中的任何DIV

margin: auto;

到CSS。 您也可以使用调整顶部和底部边距

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

要么

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

然而....

text-align: center;

将仅以文本为中心，而不是div内的元素。

---

像这样改变：

首先将className改为class 。

改变之后像这样：

.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/76013.html

上一篇: How to get this div to align center?

下一篇: vertical align text in two different div's inside another div