html - 图片偏心移动浏览

香港专业教育学院做了一些网站，但由于某种原因，我的最新网页无法在移动浏览器上正确显示。我觉得这与我用于间距（像素）的单位有关，但是我不确定。

该网页是www.zfisch.com

以下是一些相关代码片段，首先是视口：

<meta name="viewport" content="width=500, initial-scale=1">

接下来，我为图像准备了CSS：

a #twitter {
    background-color: black;
    height: 32px;
    width: 110px;
    border-radius: 6px;
    position: relative;
    margin-left: 46%;
    top: 159px;
    z-index: 1;
}


a #email {
    background-color: black;
    height: 32px;
    width: 110px;
    border-radius: 6px;
    position: relative;
    margin-left: 46%;
    top: 159px;
    z-index: 1;
}

img[src="zack.jpg"] {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    border: 3px solid white;
    margin-top: 100px;
    left: 44.5%;
    position: absolute;

}

p[id="brackets"] {
    font-size: 100px;
    left: 43%;
    position: absolute;
    margin-top: 100px;


}

如果有人能指出正确的方向，我将非常感激。谢谢！

最佳答案

绝对位置并不是实现此目的的最佳方法，但是如果您坚持使用绝对位置，请尝试如下设置：

img[src="zack.jpg"] {
    left: 50%;
    margin-left: -75px;
}

对于其他元素，请执行相同操作（将其拉到宽度的一半），并确保已设置宽度。

否则，取消定位并将容器设置为text-align: center以使图像居中。

关于html - 图片偏心移动浏览，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22517325/