title: How to center three inline <div> elements inside of another <div>
body: <p>I have a page that have three inline  elements. Now I want to have all of those  elements to be centered inside of the page. I have tried <code>align-content: center;</code> and <code>margin-left: auto;, margin-right: auto;</code> Am I able to do this?</p>
  
  <p>index.php:</p>
  
  <pre><code>&lt;?php
      include_once 'header.php';
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;/html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="index.css" /&gt;
          &lt;title&gt;&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="content"&gt;
              &lt;div class="inline" id="clicker"&gt;
                  &lt;br&gt; Atoms: &lt;span id="atoms"&gt;0&lt;/span&gt;
                  &lt;br&gt;
                  &lt;input type="image" 
      src="https://theatomandperiodictable.wikispaces.com/file/view/220px-Stylised_Lithium_Atom.svg.png/297637780/220px-Stylised_Lithium_Atom.svg.png" onClick="atomClick()" width="240" height="249"&gt;
              &lt;/div&gt;
  
              &lt;div class="inline" id="upgrades"&gt;
                  &lt;b&gt;upgrades&lt;/b&gt;
                  &lt;b&gt;text&lt;/b&gt;
              &lt;/div&gt;
  
              &lt;div class="inline" id="modifiers"&gt;
                  &lt;button onClick="buyElement()" id="BuyElement"&gt;Buy 
      Element&lt;/button&gt;&lt;br /&gt;
                  Cursors: &lt;span id="elements"&gt;0&lt;/span&gt;&lt;br /&gt;
                  Cost: &lt;span id="elementCost"&gt;10&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;br class="clearBoth" /&gt;
          &lt;script type="text/javascript" src="index.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>index.css:</p>
  
  <pre><code>#clicker, #upgrades, #modifiers {
      width: 30%;
      height: 500px;
      background-color: #09a1a8;
      border-style: solid;
      border-width: 2px;
      border-color: #000;
      text-align: center;
      margin: 4px;
      float: left;
  }
  
  #upgrades button {
      width: 100px;
      height: 20px;
      margin: auto;
  }
  
  #upgrades text {
      margin: auto;
  }
  
  
  #modifiers button {
      width: 100px;
      height: 20px;
      margin: auto;
      margin-top: 10px
  }
  
   body {
      background-color: #1e1e1e;
   }
  
  div.inline {
      float:left;
  }
  
  header nav .main-wrapper {
      background-color: #09a1a8;
      width: 100%;
      height: 40px;
  }
  
  header nav form {
      float: right;
      margin-top: 10px;
      margin-right: 10px;
  }
  
  header nav form a {
      text-decoration: none;
      color: #000;
  }
  
  header nav ul {
      float: left;
      list-style-type: none;
  }
  
  header nav ul li a {
      text-decoration: none;
      color: #000;
  }
  
  body div .content  {
      width: 100000px;
      margin-left: auto;
      margin-right: auto;
      align-self: center;
  }
  </code></pre>
  
  <p>Needed more text. Needed more text. Needed more text. Needed more text. Needed more text. Needed more text. Needed more text. Needed more text.</p>