HTML/CSS. Почему кнопка "Войти" на форме сдвинута на несколько пикселей влево?

Question

HTML/CSS. Почему кнопка "Войти" на форме сдвинута на несколько пикселей влево?

nickname Мастер (1060), на голосовании 4 месяца назад

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img class="logo" src="images/logo.png" alt="logo">
<h1>Текст шапки</h1>
</header>
<section>
<form action="">
<input type="text" name="login" placeholder="Телефон или email"><br>
<input type="password" name="pass" placeholder="Пароль"><br>
<button>
Войти
</button>
<a href="">Забыли пароль?</a>
</form>
</section>
</body>
</html>

CSS
body{
width: 50%;
margin: auto;
color:antiquewhite;
text-align: center;
}

header{
background-color: blueviolet;

}

header h1{
font-size: 36pt;
padding: 7%;
}

.logo{
float: left;
border: 3pt solid orange;
border-radius: 50%;
padding: 5pt;
margin: 5pt;
}

form{
margin: auto;
width: 45%;

}

input, button{
padding: 10px;
margin: 10px;

}

button{
text-align: left;
}

Answer 1

Ваш вопрос касается того, почему кнопка "Войти" сдвинута на несколько пикселей влево в HTML-форме. Это может быть связано с тем, что стиль text-align: left; применяется к элементу <button>, что может влиять на расположение содержимого кнопки внутри нее.

Чтобы исправить это, вы можете удалить text-align: left; из стиля кнопки или заменить его на text-align: center;. Вот исправленный код CSS:

 body {  
    width: 50%;  
    margin: auto;  
    color: antiquewhite;  
    text-align: center;  
}  
 
header {  
    background-color: blueviolet;   
}  
 
header h1 {   
    font-size: 36pt;  
    padding: 7%;  
}  
 
.logo {  
    float: left;  
    border: 3pt solid orange;  
    border-radius: 50%;  
    padding: 5pt;  
    margin: 5pt;  
}  
 
form {  
    margin: auto;  
    width: 45%;  
}  
 
input, button {  
    padding: 10px;  
    margin: 10px;  
}  
 
button {  
    text-align: center; /* Изменено с left на center */ 
}

Проверьте ваше HTML:

   
  
  
  
  
Document  
  
  
  
  
  
Текст шапки
  
  
  
  

  

  
  
Забыли пароль?

После этих изменений кнопка должна быть выровнена по центру, как и остальные элементы формы.