图像偏离中心以进行移动浏览答案

【问题标题】：Images are off-centered for mobile browsing图像偏离中心以进行移动浏览
【发布时间】：2014-03-20 05:16:14
【问题描述】：

我创建了一些网站，但由于某种原因，我的最新网页在移动浏览器上呈现不正确。我觉得这与我用于间距（像素）的单位有关，但我不确定。

网页是 www.zfisch.com

这里有一些sn-ps的相关代码，首先是视口：

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


}

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

【问题讨论】：

靠近底部的图片？
知道如何解决这个问题吗？
我只是看了看，底部的括号是text-align: center。图像可能是边距问题。我也认为left 正在敲掉一些东西。
嗯。谢谢，我试试看。

标签： html css mobile position

【解决方案1】：

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

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

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

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

【讨论】：