title: Centering div - display: inline-block;
body: <p>I'm trying to center two divs that are using "display: inline-block;" but whenever I try to, it's not working. If I remove the inline-block class. It gets centered but displayed down the page instead of across. Example of code:</p>
  
  <pre class="lang-css prettyprint-override"><code>#news {
      background-image: url('../img/news.png');
      background-repeat: no-repeat;
      height: 152px;
      width: 320px;
      display: inline-block;
  }
  #conBody {
      background-image: url('../img/conBody.png');
      background-repeat: no-repeat;
      height: 260px;
      width: 321px;
      margin: 0px auto 0px auto;
      text-align: right;
      display: inline-block;
      padding: 0px;
  }
  </code></pre>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div id="conBody"&gt;
  
  &lt;/div&gt;
  &lt;div id="conBody"&gt;
  
  &lt;/div&gt;
  &lt;div id="conBody"&gt;
  
  &lt;/div&gt;
  &lt;div id="news"&gt;
  
  &lt;/div&gt;
  &lt;div id="news"&gt;
  
  &lt;/div&gt;
  &lt;div id="news"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Looks like this:</p>
  
  <p><img src="https://i.imgur.com/yQ4hPRb.jpg" alt="preview"></p>