CSS-如何将div内的内容水平居中

Question

我似乎无法将导航栏居中。你知道如何居中吗？不知道为什么它不起作用。我已经尝试过margin 0 auto；但它只是将每个链接栏在网站上垂直等距排列。

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

Answer 1

您想要这样的东西吗？
将justify-content:center;添加到.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>