html - 图像偏离中心以方便移动浏览

Question

我制作了几个网站，但由于某种原因，我最新的网页在移动浏览器上呈现不正确。我感觉这与我使用的间距单位(像素)有关，但我不确定。

网页是www.zfisch.com

下面是一些相关代码片段，首先是视口(viewport):

<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;


}

如果有人能指出正确的方向，我将不胜感激。谢谢!

Answer 1

绝对位置不是解决此问题的最佳方式，但如果您想坚持使用它，请尝试这样的设置:

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

对于其他元素，执行相同的操作(将它们向左拉一半宽度)并确保设置了宽度。

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