title: CSS circles with text inline
body: <p>I'm trying to make a couple of css circles with text inside in one line. When I use circle class to img, circles are inline, but I cannot add any text. When I use circle class to div, I can add text, but they don't display inline, even when I add display:inline to circle class.</p>
  
  <p>CSS</p>
  
  <pre><code>        img.galeria{
          border-style: solid;
          border-width: 3px;
          border-color: yellow;
          width: 12%;
          height: 75.825%;
          border-radius: 50%;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          box-shadow: 0 0 8px rgba(0,0,0, .8);
          -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
          -moz-box-shadow: 0 0 8px rgba(0,0,0, .8);
          margin-right: 2%;
      }
  </code></pre>
  
  <p><br>HTML for the first option (img)</p>
  
  <pre><code>&lt;a href="abecadlo/"&gt;&lt;img class="galeria" src="../images/backgrounds/light-blue.png"/&gt;&lt;/a&gt;
  </code></pre>
  
  <p><br>HTML for the second option (div)</p>
  
  <pre><code>&lt;a href="abecadlo/"&gt;&lt;div class="galeria"/&gt;text&lt;/a&gt;
  </code></pre>
  
  <p><br><br>What am I doing wrong?</p>