CSS - How to center content that's inside a div horizontally

Question

I can't seem to center a navigation bar. Do you know how to center it? Not sure why it won't work. I've tried margin 0 auto; but it just line each link bar in equal distances across the site vertically.

.navigations {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
}

.buttonNav {
  text-align: center;
  background-color: red;
}

<div class="navigations">

  <div class="buttonNav">
    <a href="index.html"><img class="home-button" src="images/home- 
          icon.png" alt="Home"></a>
  </div>

  <div class="buttonNav">
    <a href="about.html"><button class="siteButton" type="onclick" 
       name="button">About</button></a>
  </div>

  <div class="buttonNav">
    <a href="contact.html"> <button class="siteButton" type="onclick" name="button">Contact</button></a>
  </div>

  <div class="buttonNav">
    <a href="exhibition.html"><button class="siteButton" type="onclick" 
      name="button">Exhibition</button></a>
  </div>

  <div class="buttonNav">
    <a href="learn.html"><button class="siteButton" type="onclick" 
            name="button">Learn</button></a>
  </div>

  <div class="buttonNav">
    <a href="shop.html"><button class="siteButton" type="onclick" 
     name="button">Shop</button></a>
  </div>
</div>

Your .top1` class does not exist in the HTML you have provided. — Paulie_D, Oct 25 '18 at 12:16
Yes, my bad. Was supposed to be that, but cant get it to work none the less — Red Shark, Oct 25 '18 at 12:18
It is centered? Or do you want the navigation buttons to be next to each other? — Wimanicesir, Oct 25 '18 at 12:20

score 1 · Accepted Answer · answered Oct 25 '18 at 12:22

do you want something like this ?
add justify-content:center; to .navigations

.navigations {
 display: flex;
 flex-direction: row;
 justify-content:center;
 
  }

.buttonNav {
text-align: center;
background-color: red;
}

<div class="navigations">

  <div class="buttonNav">
     <a href="index.html"><img class="home-button" src="images/home- 
      icon.png" alt="Home"></a>
  </div>

  <div class="buttonNav">
   <a href="about.html"><button class="siteButton" type="onclick" 
   name="button">About</button></a>
  </div>

  <div class="buttonNav">
    <a  href="contact.html"> <button class="siteButton" type="onclick" 
      name="button">Contact</button></a>
  </div>

  <div class="buttonNav">
    <a href="exhibition.html"><button class="siteButton" type="onclick" 
  name="button">Exhibition</button></a>
  </div>

  <div class="buttonNav">
     <a href="learn.html"><button class="siteButton" type="onclick" 
        name="button">Learn</button></a>
  </div>

  <div class="buttonNav">
     <a href="shop.html"><button class="siteButton" type="onclick" 
 name="button">Shop</button></a>
  </div>
</div>

Justify content. I ALWAYS forget that exist. Thank you so much! Question Answered :D — Red Shark, Oct 25 '18 at 12:24

CSS - How to center content that's inside a div horizontally

1 Answers1