title: CSS Pyramid of circle-divs
body: <p>I want to get a pyramid/triangle of circles in my web page. But im struggling to get the CSS right. I´ve got the circles, but I´m strugglung with aligning them in the right shape, sometimes they are not centered, sometimes they are weirdly spread. Trying for quite some time now, any help would be highly appreciated :D</p>
  
  <p>Examples:</p>
  
  <pre><code>   o  
    o o  
   o o o  
  o o o o  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/e20tt.png" rel="nofollow noreferrer">Example image</a></p>
  
  <p>Circles:</p>
  
  <pre><code>.circle {
    height: 25px;
    width: 25px;
    background-color: #555;
    border-radius: 50%;
  }
  </code></pre>