Question

我的网站着陆页上有一个全屏背景图片，中间有我的徽标。该网站使用Bootstrap并完全响应。徽标在我的浏览器窗口中垂直和水平对齐，当窗口调整大小时，徽标正确地保留在中心。但是，当在手机或平板电脑上观看时，图像背景图像会正确调整大小，但徽标不会停留在页面的中央，而是位于屏幕右侧，其中一半被遮挡。

关于如何纠正这个问题的任何想法？网站登陆页面是实时的，您可以在www.burnser.com找到它

以下是代码：

<img alt="full screen background image" src="img/bg.jpg" id="full-screen-   
background-image" /> 
<div class="centered">
<a href="work.html"><img src="img/home_logo.png" alt="BB Logo" width="200"   
height="137"></a>
</div>

这是我正在使用的CSS：

#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}

.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}

非常感谢任何帮助。

Answer 1

我的手机看起来很好。尝试使用其他浏览器，并尝试使用transform作为前缀。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

不过，1MB的背景图片非常庞大。你应该模糊噪音，以减少图像的大小。

Bootstrap：徽标不以着陆页为中心

1 个答案: