Как сделать отзывчивым выровненное по правому краю поле для входа в центр при просмотре на экранах разных размеров с помощью медиа-запросов?

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

использовать медиа-экран для создания отзывчивости

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

Answer 3

Этот ответ немного общий, но этот вопрос не дает мне много информации о вашей проблеме. Рекомендуется дать хотя бы фрагмент кода, с которым вы боретесь

После этого я бы вставил некоторые атрибуты 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 в медиа-запрос, чтобы перезаписать это значение.

UPDATE Теперь, с помощью фрагмента, я вижу, что ваш 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;
  }   
}