CSS circles with text inline - css

Question

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.
CSS
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%;
}
HTML for the first option (img)
<img class="galeria" src="../images/backgrounds/light-blue.png"/>
HTML for the second option (div)
<div class="galeria"/>text
What am I doing wrong?

Answer 1

In your style, replace display: inline; with display:inline-block;. It worked for me!

Answer 2

Try this
.galeria {
border-style: solid;
border-width: 3px;
border-color: yellow;
width: 50px;
height: 50px;
text-align:center;
line-height:50px;
background:url('...imgsrc.jpg');
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);
}

Answer 3

You say that you tried display: inline, but it isn't in your code.
If you try it, it works
.galeria{
border-style: solid;
border-width: 3px;
border-color: yellow;
width: 12%;
height: 75.825%;
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%;
display: inline;
}
demo