Rendering image positions different in different browsers - html

Question

I am trying to render the images, it comes out perfectly in Firefox and Chrome, but is having issues in Safari(v 7.0.3). In Safari, image shifts to bottom right, while I want the image to be at the bottom center.
This is my css
.circular {
/*margin: 10px 30px 0px 30px;*/
display: block;
margin: 0 auto;
position: relative;
bottom:-400px;
left:93%;
transform:translateX(-50%);
}
HTML :
<section class="module parallax parallax-1">
<div class="container">
<div class="circular" vertical-align:middle; text-align:center><img src="images/index/yoyo.png" width=120px height=120px></div>
<div class="social_tags" vertical-align:middle; >
<img src="images/index/github.png" width=40px height=40px>
<img src="images/index/facebook.png" width=40px height=40px>
<a href="mailto:yoyo#gmail.com?Subject=Hello" ><img src="images/index/gmail.png" width=40px height=40px></a>
<img src="images/index/linkedin.png" width=40px height=40px>
</div>
</div>
</section>

Answer 1

You have several issues with your html.
I fixed them in this fiddle and it works the same in chrome as in safari: https://jsfiddle.net/msq0eqch/3/
This is the corrected html code:
(You had your style without style="" etc.)
<section class="module parallax parallax-1">
<div class="container">
<div class="circular" style="vertical-align:middle; text-align:center"><img src="images/index/yoyo.png" width="120px" height="120px"></div>
<div class="social_tags" style="vertical-align:middle;" >
<img src="images/index/github.png" width="40px" height="40px">
<img src="images/index/facebook.png" width="40px" height="40px">
<img src="images/index/linkedin.png" width="40px" height="40px">
</div>
</div>
</section>
Also add -webkit-transform:translateX(-50%); to your css.