CSS problem z wyśrodkowaniem diva

Question

Cześć. Mam problem z wyśrodkowaniem diva znajdującego się miedzy tagami <header> i <footer>. W środku diva znajdują się tagi <nav> i <article>. Probówalem ustawiać bloki nav i article za pomocą

display: inline-block;

 jak również

float: left;

a póżniej wyśrodkować za pomocą

margin-left: auto; margin-right: auto;

oraz align-items; center;. Niestety nie zadziałało i nie wiem co może być przyczyną. Wklejam kod może jest tam jakiś inny błąd. Proszę o pomoc.

  <header>
    Przyklad
  </header>
  
  <div class="content">
    <nav>
      Przyklad
    </nav>
    <article>
      Przyklad
    </article>
  </div>
  
  <footer>
    Przyklad
  </footer>

header{
  background-color: black;
  margin-left: auto;
  margin-right: auto;
}

.content{
  margin: 0 auto;
  align-items: center;
}

nav{
  width: 100px;
  height: 300px;
  background-color: yellow;
  display: inline-block;
}

article{
  width: 200px;
  height: 300px;
  background-color: #0fc4fe;
  display: inline-block;
}

footer{
  width: 100%;
  background-color: #e8dd46;
  clear: both;
}

 

Answer 1

margin-left: auto; margin-right: auto;

Działa, tylko musisz zdefiniować szerokość .container

---

Jeśli chcesz użyć flexa: 

display: flex;
justify-content: center;

 

Comments

Faktycznie działa! Dzięki!