Put two centered divs next to each other [duplicate] - html

Question

This question already has answers here:
Horizontally & Vertically centering 2 divs within two side by side 50% width columns
(1 answer)
2 side by side divs centered?
(3 answers)
Align 2 divs side by side in a parent
(4 answers)
Closed 4 years ago.
How can I put two centered divs next to each other, with some padding in between? I've tried display: inline but that doesn't seem to work.
.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 looking for a way to make the blue text-elipse a circle, but that's a different question I suppose.)

Answer 1

Use display:inline-block in your .my-container to align them side by side...
Also you will need to wrap your .my-container divs into a wrapper div with text-aign:center to align the inner inline items to center
.wrapper {
text-align: center;
}
.my-container {
position: relative;
text-align: center;
color: red;
width: 20%;
margin: auto;
display: inline-block;
}
/* 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="wrapper">
<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>
</div>

Answer 2

You should add display: inline-block; to my-container class.
.my-container {
position: relative;
text-align: center;
color: red;
width: 20%;
margin: auto;
display: inline-block;
}
/* 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>