What is the best way to align two divs in the center beside each other with some padding in between that actually works? I attempted using display: inline, but it didn't have the desired effect.
.my-container {
position: relative;
text-align: center;
color: red;
width: 20%;
margin: auto;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-border-radius: 50%;
border-radius: 50%;
background-color: blue;
}
<div class="my-container">
<img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
<div class="centered">text</div>
</div>
<div class="my-container">
<img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
<div class="centered">text 2</div>
</div>(Note: I'm also interested in turning the blue text-elipse into a circle, but I'll save that for another question.)