I can not get my flexbox to center the content with "justify-content : center" in css

Question

I want to center my webpage, and center the content on my web page, but the justify content (in css) does not seem to work. I have tried setting max-width in both precentage and pixels, and added and removed margins. I would really apreciate all help!

i have multiple div elements inside other elements, including a menu, which i would like to center, and even distrubetly the text inside the menu. Then i have an header which have a fixed size due to poor resolution. The only way i have managed to center anything is by setting margin to auto, but i believe that overwrites the flexbox system? I also tried creating a new div wich incapsulates everything (Innpakning1), but that only gave me two divs wich did not do what i hoped for.

 <div class="innpakning1">

<div class="innpakning">


<div class="overskrift">
   <img src="media/header.png" id='overskrift' alt="">
</div>

<div class="meny">

  <div class="delmeny"> <a href="beisthjem.php" >Hjem</a> </div>
  <div class="delmeny"> <a href="beistallebeist.php"> Alle beist</a> </div>
  <div class="delmeny"> <a href="beistkategorier.php"> Kategorier </a> </div>

</div>

<div class="informasjon">

       <p> Scamander har som sitt oppdrag i livet å finne og katogerisere beist. Han ønsker å vise verden at de er mer fantastiske enn farlige,
 og har derfor laget denne siden som drives av en nonprofit organisasjon av samme navn som grunnleggeren. Her kan du kartelgge hvilke dyr som finens,
 og gitt at du er en sertifisert beistfinner, legge til dine egne funn.
 Vi gleder oss til å samarbeide med deg.
     </p>


     </div>

</div>

</div>

here is my css.

body{
 display: flex;
 background-color: blue;
 width: 100%;
}
.innpakning1{
display: flex;
justify-content: center;
max-width: 800px;
margin-left: 15px;
}

.innpakning{

display: flex;
margin-left: 15px;
flex-direction: column;
background-color: red;
max-width: 400px;
justify-content: center;

}


.meny{
display: flex;
background-color: violet;
max-width: 200px;
justify-content: center;
margin-left: 15px;
}

.delmeny{
max-width: 200px;
 display: flex;
 margin-left: 15px;
}

#overskrift{
margin: auto;
   display: flex;
 height: 78px;
 width: 317px;
margin-left: 15px;
}

.informasjon{
background-color: aliceblue;
 display: flex;
 max-width: 200px;
 flex-direction: column;
 justify-content: center;
margin-left: 15px;

}

You are correct in that flex properties are over-ridden by margins (specifically on the flex-items). So why does everything have `margin-left: 15px`? That definitely isn't a property/value that facilitates symmetric behavior. — zer00ne, May 10 '20 at 07:20

score 1 · Accepted Answer · answered May 10 '20 at 07:20

1

in flex-direction: column you should set align-items: center for everything be centerilize,add justify-content: center to body and align-items: center to div with class .innpakning

answered May 10 '20 at 07:20

Mohsen007

285
3
13

This works perfectly! As i am learning css i do not understand the difference between justifycontent and align-items. i have tried changint them up in my doccument, but can not seem to figure out a system. Would you care to explain? Thank you again! – line2509 May 10 '20 at 09:56
sorry for my bad english..."justify-content: center" sets elements in horizontaly center of parent and "align-items:center" in vertically center also.because you changed flex-direction to column,these two style are reversed – Mohsen007 May 10 '20 at 10:09

score 0 · Answer 2 · answered May 10 '20 at 07:28

Use below css, it'll make everything centre

body {
  display: flex;
  background-color: blue;
  width: 100%;
  margin: 0;
}
.innpakning1 {
  display: flex;
  justify-content: center;
  max-width: 800px;
  margin-left: 15px;
  margin: auto;
}

.innpakning {
  display: flex;
  margin-left: 15px;
  flex-direction: column;
  background-color: red;
  max-width: 400px;
  justify-content: center;
  align-items: center;
}

.meny {
  display: flex;
  background-color: violet;
  max-width: 200px;
  justify-content: center;
}

.delmeny {
  max-width: 200px;
  display: flex;
  margin-left: 15px;
}

#overskrift {
  margin: auto;
  display: flex;
  height: 78px;
  width: 317px;
}

.informasjon {
  background-color: aliceblue;
  display: flex;
  max-width: 200px;
  flex-direction: column;
  justify-content: center;
}

Was there anything wrong in that code or is it not working? I have used `margin: auto` for `body`, as it's not flex item. Only removed margins and added required css to the existing css. For better understanding go through this [Flexbox and auto margins](https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/) — Nithish, May 10 '20 at 08:17

I can not get my flexbox to center the content with "justify-content : center" in css

2 Answers2