divs not floating to the center - html

Question

im trying to create this:
but the images are floating to the right and not stick at the center.
and the text floating to the left and not in the center.
and the "OR" is not in the middle.
here is my code:
<div class='container' >
<span style="float:left; margin-left:20px;">
<div class='textrtl' style="text-align: center;"><h5>WhatssApp</h5></div>
<div class='pickbuttonplatform' id='image0a' ><img alt="" src="http://placehold.it/90x70" style="width:100px; height:100px;"></div>
<div class='textrtl' style="text-align: center;">Recommended to Europe, India, Brazil and Israel</div>
</span >
OR
<span style="float:right; margin-left:20px;">
<div class='textrtl' style="text-align: center;"><h5>SMS</h5></div>
<div class='pickbuttonplatform' id='image0a' ><img alt="" src="http://placehold.it/90x70" style="width:100px ; height:100px;"></div>
<div class='textrtl' style="text-align: center;">Recommended to the United States</div>
</span>
</div>
what should i do??

Answer 1

Add the following CSS:
.pickbuttonplatform{
text-align:center;
}
Here is the JSFiddle demo

Answer 2

to align or in middle use inline-block see snippet below
img{display: block; margin: 0 auto;}
.txt-block{display: inline-block; vertical-align: middle; text-align: center;}
.img-block{display: inline-block; vertical-align: middle; width: 40%;}
<div class='container' >
<span class="img-block">
<div class='textrtl' style="text-align: center;"><h5>WhatssApp</h5></div>
<div class='pickbuttonplatform' id='image0a' ><img alt="" src="http://placehold.it/90x70" style="width:100px; height:100px;"></div>
<div class='textrtl' style="text-align: center;">Recommended to Europe, India, Brazil and Israel</div>
</span >
<span class="txt-block">
OR
</span >
<span class="img-block">
<div class='textrtl' style="text-align: center;"><h5>SMS</h5></div>
<div class='pickbuttonplatform' id='image0a' ><img alt="" src="http://placehold.it/90x70" style="width:100px ; height:100px;"></div>
<div class='textrtl' style="text-align: center;">Recommended to the United States</div>
</span>
</div>

Answer 3

By default everything is left aligned so you need to define it if you want to centre align the elements.
Here you can use text-align:center
<div class='container'>
<span style="float:left; margin-left:20px;">
<div class='textrtl' style="text-align: center;"><h5>WhatssApp</h5></div>
<div class='pickbuttonplatform' id='image0a' style="text-align:center;"><img alt="" src="http://placehold.it/90x70" style="width:100px; height:100px;"></div>
<div class='textrtl' style="text-align: center;">Recommended to Europe, India, Brazil and Israel</div>
</span >
<span style="float:right; margin-left:20px;">
<div class='textrtl' style="text-align: center;"><h5>SMS</h5></div>
<div class='pickbuttonplatform' id='image0a' style="text-align:center;"><img alt="" src="http://placehold.it/90x70" style="width:100px ; height:100px;"></div>
<div class='textrtl' style="text-align: center;">Recommended to the United States</div>
</span>
</div>
OR
use this css if you can
.pickbuttonplatform{
text-align:center;
}
Example : https://jsfiddle.net/g5emes1v/
In your structure you are using #image0a id twice which is not valid. You cannot use same id multiple times in one page