使用媒体查询以不同屏幕尺寸查看时，如何使响应式右对齐登录框居中？

Question

我制作了一个响应式登录表单，其中的登录框与右侧对齐，但是我希望我的登录框使用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;}    

Answer 1

这个答案有点笼统，但是这个问题并没有给我太多有关您的问题的信息。 建议至少给出您正在苦苦挣扎的代码的一小段

这样，我将在媒体查询中插入一些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在媒体查询中position: inherit以覆盖此值。

更新现在有了代码段，我可以看到您的CSS没有说明left属性，这对于将某些内容向右对齐非常有用。 为了使其居中，只需在媒体查询中添加一个left:属性，并将right属性的值设置为相同，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;
  }   
}

Answer 2

如果将登录框的父元素的显示声明为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. 

Answer 3

使用媒体屏幕做出响应

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