0

我有一个简单的 PHP 网站，它仅使用 PHP 来在 index.php 中包含另一个文件，因此您可能会认为它仅使用 HTML。

问题是，当在我的笔记本电脑上查看该网站的一页时，它似乎正常显示，而从我的智能手机或 PC 上查看它却很奇怪。

这是链接：strasbourgmeetings.org/rigaCloud/login：您会在那里找到双色页面，中间有一个半透明的登录表单。问题是只有我的笔记本电脑在中间显示它，但我的 PC 和其他设备没有。

是的，我知道有一个糟糕的 CSS 代码，但是，无论如何，我非常感谢你帮助我把这个块放在中间。

PS：我是这么想的，top: 50%; left: 50%并且margin: -25% 0 0 -25%会使其居中，但是...

那是我使用的 HTML：

<div class="white"></div>
<div class="blue"></div>
<div class="heraldry"></div>
    <!--</div>-->
<section class="container">
<div class="login">
    <div class="loginOpacity"></div>
  <h1>Login to RigaCloud</h1>
  <form method="post" action="index.html">
    <p><input type="text" name="login" value="" placeholder="Username or Email"></p>
    <p><input type="password" name="password" value="" placeholder="Password"></p>
    <p class="remember_me">
      <label>
        <input type="checkbox" name="remember_me" id="remember_me">
        Remember me on this computer
      </label>
    </p>
    <p class="submit"><input type="submit" name="commit" value="Login"></p>
  </form>
</div>

<!--<div class="login-help">-->
  <!--<p>Forgot your password? <a href="index.html">Click here to reset it</a>.</p>-->
<!--</div>-->
</section>

.white {
position: absolute;
top: 0;
width: 100%;
height: 50%;
}

.blue {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
z-index: -1;
}

.heraldry {
position: absolute;
top: 50%;
left: 50%;
width: 728px;
height: 428px;
margin: -214px 0 0 -364px;
}

.container {
margin: 80px auto 0 -25%;
width: 640px;
position: absolute;
top: 10%;
left: 50%;
}

.containerOpacity {
margin: 90px auto 0 -25%;
width: 640px;
position: absolute;
top: 10%;
left: 50%;
}

.login {
position: absolute;
left: 50%;
top: 50%;
//margin: 0 auto;
margin: 0 auto 0 -25%;
padding: 20px 20px 20px;
width: 310px;
}
.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
}

.loginOpacity {
background: #000;
position: absolute;
width: 310px;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
margin: 0 auto;
padding: 20px 20px 20px;
}
4

3 回答 3

0

这是我将没有特定宽度的元素居中的方式。您可以将此方法用于文本、图像、按钮等！

/* The HTML */
<div class="container">
   <div class="content"></div>
</div>

/* The CSS */
.container {
    float: left;
    position: relative;
    left: 50%;
}

.content {
    float: left;
    position: relative;
    left: -50%;
}
于 2013-08-24T22:33:29.260 回答
0

使用auto左边距和右边距将使元素在其父元素中居中（与其他合适的 css 规则一起）。但是，您的整个登录表单都在<section class="container">绝对定位的部分中。您应该专注于使这个容器元素居中，这可能需要移除它的绝对定位。

顺便说一句，如果您在笔记本电脑上减小浏览器的宽度，您的登录也不会居中。

于 2013-08-24T22:15:35.433 回答
0

给它一个特定的宽度并做margin: 0 auto;

于 2013-08-24T22:09:32.243 回答