Как выровнять input по центру?

155
29 января 2021, 04:40

не получается выровнять по центру форму. Уже всё попробовал. Flex использовать не вариант. Так же не получается сделать кнопку по ширине input-ов или тоже разместить по центру.

form { 
	display: block; 
	background: #5B3C67; 
	padding: 50px; 
	width: 100%; 
	color: white; 
	margin-right: auto; 
	margin-left: auto; 
} 
 
form input { 
	text-align: center; 
	padding: 10px; 
	margin-bottom: 20px; 
	//margin-left: 40%; 
	width: 23%; 
	height: 15px; 
	border: 1px solid #ff8c00; 
} 
 
.button { 
	width: 20%; 
	font-size: 14pt; 
	color: white; 
	background: #7F113E; 
	height: 55px; 
	padding: 10px; 
	border: 1px solid #F5C4AB; 
} 
 
.button:hover { 
	border: 1px solid white; 
}
<section class="order"> 
 
			<div class="center"> 
 
				<form class="" action="send.php" method="post"> 
					<h1>Свяжитесь с нами</h1> 
					<input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваше имя" required><br> 
					<input type="text" name="email" size="15" maxlength="20" value="" placeholder="Ваш e-mail" required><br> 
					<input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваш телефон" required><br> 
					 
					<input class="button" type="submit" name="Submit" value="Отправить"><br> 
 
				</form> 
 
			</div> 
 
		</section>

Answer 1

не нужно добавлять у самих input-ов text-align:center, полезнее у родителя:

form {text-align:center;}

по поводу одинаковой ширины - определить у input и button

width: 25%;

только еще у input добавить

box-sizing: border-box;

чтобы padding не влияли на ширину

form { 
  display: block; 
  background: #5B3C67; 
  padding: 50px; 
  width: 100%; 
  color: white; 
  margin-right: auto; 
  margin-left: auto; 
  text-align: center; 
} 
 
form input { 
  box-sizing: border-box; 
  padding: 10px; 
  margin-bottom: 20px; 
  //margin-left: 40%; 
  width: 25%; 
  height: 35px; 
  border: 1px solid #ff8c00; 
} 
 
.button { 
  width: 25%; 
  font-size: 14pt; 
  color: white; 
  background: #7F113E; 
  height: 55px; 
  padding: 10px; 
  border: 1px solid #F5C4AB; 
} 
 
.button:hover { 
  border: 1px solid white; 
}
<section class="order"> 
 
  <div class="center"> 
 
    <form class="" action="send.php" method="post"> 
      <h1>Свяжитесь с нами</h1> 
      <input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваше имя" required><br> 
      <input type="text" name="email" size="15" maxlength="20" value="" placeholder="Ваш e-mail" required><br> 
      <input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваш телефон" required><br> 
 
      <input class="button" type="submit" name="Submit" value="Отправить"><br> 
 
    </form> 
 
  </div> 
 
</section>

Answer 2

С flex

.center { 
  display: flex; 
  justify-content: center; 
  margin: 0 auto; 
  padding: 10px 20px; 
} 
form { 
	background: #5B3C67; 
	padding: 50px; 
	color: white; 
	margin-right: auto; 
	margin-left: auto; 
  width: 100%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  flex-direction: column; 
} 
 
form input { 
	text-align: center; 
	padding: 10px; 
	margin-bottom: 20px; 
	//margin-left: 40%; 
	width: 23%; 
	height: 15px; 
	border: 1px solid #ff8c00; 
  width: 150px; 
} 
 
.button { 
	width: 20%; 
	font-size: 14pt; 
	color: white; 
	background: #7F113E; 
	height: 55px; 
	padding: 10px; 
	border: 1px solid #F5C4AB; 
  width: 200px; 
} 
 
.button:hover { 
	border: 1px solid white; 
}
<section class="order"> 
 
			<div class="center"> 
 
				<form class="" action="send.php" method="post"> 
					<h1>Свяжитесь с нами</h1> 
					<input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваше имя" required><br> 
					<input type="text" name="email" size="15" maxlength="20" value="" placeholder="Ваш e-mail" required><br> 
					<input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваш телефон" required><br> 
					 
					<input class="button" type="submit" name="Submit" value="Отправить"><br> 
 
				</form> 
 
			</div> 
 
		</section>

Answer 3

Разобрался. Надо было добавить:

form input { 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
}

READ ALSO
Размер кастомных иконок спиков css

Размер кастомных иконок спиков css

Существует некий список, в котором обязательно нужны кастомные иконки, сделал их через list-style-image: url(/img/gearwheel

137
Перенос строки через JavaScript

Перенос строки через JavaScript

Пишу небольшой чатКаждое новое сообщение нужно выводить с новой строки

143
Поворот и движение объекта

Поворот и движение объекта

Я новичок в Unity и недавно у меня появилась проблема: как запрограммировать 2D персонажа с видом сверху на движение вперёд и назад, при нажатии...

197
Как настроить кнопку в Unity?

Как настроить кнопку в Unity?

Есть вот такой код:

148