-1

I'm really stuck getting things into the center of a div; it's looking like this

justify-content: center; doesn't work, I don't know why; please help.

#personality {
  margin-left: auto;
  margin-right: auto;
  width: 280px;
  height: 500px;
  box-sizing: border-box;
  display: flex;
  background-color: #ffffff;
  border-radius: 20px;
  border: solid #DFDFDF;
  flex-direction: column;
}

#personalityWrapper {
  background: #DFDFDF;
  border: solid #DFDFDF;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  height: 150px;
  flex-direction: column;
  justify-content: center;
}

#personalityMBTI {
  justify-content: center;
  width: 280px;
}
<div id="personality">
  <div id="personalityWrapper">
    <div id="personalityMBTI">MBTI</div>
    <div><img src="./img/personalityimg.png" /></div>
    <div>Virtuoso</div>
    <div>ISTP-A</div>
  </div>
  <div><img src="./img/personality.png" /></div>
</div>

justify-content: center; to #personality doesn't work either. Even tried align-items: center; but still looking like this.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
naseweis
  • 1
  • 1

1 Answers1

0

If you're using flex-direction: column; then you're inverting the X and Y axis. So align-items: center; is the one that will center your items in the X axis while justify-content: center; will center in the Y axis.

Ezequiel Romero
  • 1