0

我制作了一个响应式登录表单，登录框向右对齐，但我希望我的登录框使用 CSS 媒体查询以不同的屏幕尺寸显示在中心。

我当前的 CSS 代码是：

enter code here 
.login {  
position: absolute;  
top: 8em;   
right: 5vw;  
}  
.login-card {  
    min-width: 20vw;  
    max-width: 25em;  
    min-height: 20vh;  
    max-height: 25em;}
4

3 回答 3

0

使用媒体屏幕进行响应

@media screen and (max-width: 767px){   
 .login {  
    position: absolute;  
    top: 8em;
    left: 0;   
    right: 0;
    margin: auto;  
    }  
    .login-card {  
        min-width: 20vw;  
        max-width: 25em;  
        min-height: 20vh;  
        max-height: 25em;
    } 
}
于 2018-05-15T14:04:33.820 回答
0

这个答案有点笼统，但这个问题并没有给我太多关于你的问题的信息。建议至少提供您正在努力的代码片段

有了这个，我将在媒体查询中插入一些 CSS 属性，如下所示：

@media only screen and (max-width: 768px) {
    your_login_panel {
        display: block;
        width: 300px; /* the wished size for your login panel */
        margin: 20px auto; /* the second attribute has to be auto, this value combined with display:block will center the element inside the element that it's located */
    }
}

如果您使用position: absolute将元素向右对齐，请记住position: inherit在媒体查询中插入以覆盖此值。

更新 现在使用代码段，我可以看到您的 CSS 没有声明左侧属性，这对于将某些内容向右对齐非常有用。为了使其居中，只需在left:您的媒体查询中添加一个具有相同属性值的属性，CSS 将尝试同时满足这两个属性，您还应该放置一个margin: auto;属性，以便让 CSS 更自由地使用边距并居中登录面板。您的媒体查询应如下所示：

@media only screen and (max-width: 768px) {
  .login {  
    position: absolute;  
    top: 8em;   
    right: 0px;   
    left: 0px;
    margin: auto;
  }  
  .login-card {  
     min-width: 20vw;  
     max-width: 25em;  
     min-height: 20vh;  
     max-height: 25em;
  }   
}
于 2018-05-15T08:38:36.740 回答
0

如果将登录框的父元素的显示声明为flex，则可以在右侧设置登录框的正常显示位置，使用：

justify-content: flex-end;

并编写一个 @media 查询，其中值更改为：

justify-content: center;

工作示例：

body {
background-color: rgb(191, 191, 255);
}

section {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 24px 12px;
background-color: rgb(163, 163, 255);
box-shadow: 0 0 6px rgb(0, 0, 0);
}

form.login {
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 88px auto;
grid-row-gap: 6px;
width: 240px;
padding: 12px;
font-family: arial, helvetica, sans-serif;
color: rgb(255, 255, 255);
background-color: rgb(95, 95, 255);
}

@media only screen and (max-width: 900px) {

section {
justify-content: center;
}

}
<section>
<form class="login">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="username" placeholder="Username" />


<label for="password">Password:</label>
<input type="text" name="password" id="password" class="password" placeholder="Password"/>
</form>
</section>

<p>On a narrower screen, the login box appears in the center.<br />
Try switching to <strong>Full page</strong>, to see the login box move over to the right hand side.

于 2018-05-15T09:33:05.027 回答