How to get this div to align center?

Question

I have this markup

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

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

I tried to align the <div>Read Chapter 1 to 3</div> but it won't align to center when I use text-align: center; I tried on the that div and on its parent div.

I removed text-align from my code as it was not working that's why you don't see it.

score 3 · Accepted Answer · answered Jun 30 '17 at 17:10

Use justify-content: center to .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>

score 0 · Answer 2 · answered Jun 30 '17 at 17:14

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.

Ehsan · Answer 3 · 2017-06-30T17:25:59.933

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>

Ah, right I copied my example that is inside reactjs so className is the valid way to do it. — chobo2, Jun 30 '17 at 17:28

score 0 · Answer 4 · answered Jun 30 '17 at 17:27

I usually go with position absolute along with transform for inner div & position relative for outer div.

Check the same example in jsfiddle https://jsfiddle.net/f2vvy6st/

.course-flex-row-2 {
position: relative;
width: 400px;
height: 400px;
border: 1px solid red;

div {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top:50%;
}

}

CDR · Answer 5 · 2018-05-23T06:13:19.907

0

put align attribute to the parent div, it should also work, (not recommended but will get you work)

<div className="course-flex-container" align="center">

edited May 23 '18 at 06:13

answered Jun 30 '17 at 17:27

CDR

227
1
11

1

Always avoid the inline styling.Your code should work but keep the standard while you coding. you already assigned className for your div but why you used inline styling – MK Vimalan May 21 '18 at 09:51
1

@MKVimalan I know we should avoid inline styles even though the specificity of inline styles are more than class, id, element level styles, but I thought to show him another way since all the other answers have the bests way of implementation. but good that you comment, because this align attribute is now deprecated and this answer should be avoided. – CDR May 23 '18 at 06:11
1

cheers man,As you mentioned that also correct and works fine if you use in your code.But i say give some more attention towards the standard – MK Vimalan May 23 '18 at 06:20
1

ya correct mate – CDR May 23 '18 at 06:22

How to get this div to align center?

5 Answers5