Html 在不同浏览器中呈现不同的图像位置

我正在尝试渲染图像，它在Firefox和Chrome中表现得非常完美，但在Safari（V7.0.3）中出现了问题。在Safari中，图像移到右下角，而我希望图像位于底部中心

这是我的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; >
                <a href="https://github.com/yoyo"><img src="images/index/github.png" width=40px height=40px></a>
                <a href="https://www.facebook.com/yoyo"><img src="images/index/facebook.png" width=40px height=40px></a>
                <a href="mailto:yoyo@gmail.com?Subject=Hello" ><img src="images/index/gmail.png" width=40px  height=40px></a>
                <a href="https://in.linkedin.com/in/yoyo"><img src="images/index/linkedin.png" width=40px height=40px></a>
              </div>
            </div>
 </section>

---

您的html有几个问题。 我在这把小提琴中固定了它们，它在chrome中的工作原理与在safari中相同：

这是正确的html代码：
（你的风格没有style=”“等）

---

还添加了

-webkit转换：translateX（-50%）到您的css。
哪个版本的Safari？您是否尝试过将
-webkit-
前缀用于
转换
属性？当你说它“有问题”时，你能详细说明你看到了什么问题吗？@Quantastical:编辑后的帖子适用于Chrome和Safari，但不适用于Firefox。在Firefox中，图像向右移动就是这样。谢谢：）
<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;" >
                <a href="https://github.com/yoyo"><img src="images/index/github.png" width="40px" height="40px"></a>
                <a href="https://www.facebook.com/yoyo"><img src="images/index/facebook.png" width="40px" height="40px"></a>
                <a href="mailto:yoyo@gmail.com?Subject=Hello" ><img src="images/index/gmail" width="40px" height="40px"></a>
                <a href="https://in.linkedin.com/in/yoyo"><img src="images/index/linkedin.png" width="40px" height="40px"></a>
              </div>
            </div>
 </section>