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

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

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

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

有了这个，我会在媒体查询中插入一些 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 属性，这对于将某些内容向右对齐非常有用。为了居中，只需在媒体查询中添加一个具有相同值的 right 属性的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;
}   
}

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