Question

我的徽标问题我想在主页上居中对齐。它在桌面上工作正常，但是当我在移动设备上查看时，它会自动固定在右侧并从框架中掉出来。

这是背景图片：

＆＃13;

#homebg { 
  background: url(images/back.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

＆＃13;

这是徽标：

＆＃13;

#logo {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

＆＃13;

我的主要目标是让徽标在所有平台上居中对齐。任何帮助都会很棒！

Answer 1

尝试：

margin-left: 50%;
margin-right: 50%;

Answer 2

发生的事情是，在小屏幕上，50％是徽标左侧的空间，徽标本身占据了屏幕的60％（因为屏幕很小）而且你和＃39;向左溢出。

您可以使用CSS calc（）函数找出徽标居中所需的实际空间量：css calc tutorial

徽标的宽度是多少？（将此更改为实际宽度..我只是在这里猜测）宽度：300px;
计算机或手机屏幕的总宽度是多少？ 100％
因此，完美居中徽标左侧的空间应为：（100％-300px）/ 2
求解方程得出：50％-150px

只需修复CSS代码中的一行即可：

left: calc(50% - 150px);

- （减号）标志周围的空间是重要的

生成的CSS应为：

#logo {
    position: fixed;
    top: 50%; /*wait a second .. you want it centered vertically, too?? */
    left: calc(50% - 150px); /* 50% minus "the width of your logo divided by 2" */
    /* transform: translate(-50%, -50%); */ /* what's this line for? you dont need this line for positioning ... */    }

如果您不知道#logo的宽度，并且您需要确定确切的浏览器数量，请右键点击Chrome中的该元素 - ＆gt;点击＆＃34;检查元素＆＃34;然后单击＆＃34;计算＆＃34;样式，以查看它的确切宽度。然后，返回代码，请务必更改left: calc(50% - 150px);以反映您找到的宽度。它应该是＆＃34;计算样式中元素的宽度＆＃34;部分除以2 。

Div以桌面为中心，但在移动设备上固定为右侧。发生了什么？

2 个答案: