Я с чем-то простым, но почему-то не могу этого добиться. Как следует из названия, я не могу центрировать элементы HTML-формы. Я хотел посмотреть, смогут ли они помочь мне. Вот код:
<body>
<object id="header" data="header.html" onload="resizeObj(this);"></object>
<form id="formulario" action="enviado.php" method="post">
<div id="content">
<label>Nombre</label><br>
<input id="nombre" name="nombre" type="text" /> <br>
<label>Email</label><br>
<input id="email" name="email" type="text" /> <br>
<label>Contenido</label><br>
<textarea id="contenido" name="comment" cols="30" rows="5">Ingresa aqui el mensaje...</textarea><br>
<input id="campo3" name="enviar" type="submit" value="Enviar" />
</div>
</form>
<object id="footer" data="footer.html" onload="resizeObj(this);" ></object>
</body>
И CSS:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
padding: 0px;
margin: 0px;
border:none;
width: 100%;
}
#header{
width: 100%;
padding: 0px;
margin: 0px;
overflow:hidden;
}
#footer{
position: fixed;
bottom:0;
left:0;
width: 100%;
padding: 0px;
margin: 0px;
overflow:hidden;
}
#formulario{
margin: 0 auto;
align-content: center;
border-radius: 10px;
border: 1px solid #666666;
width: 500px;
}
label {
font-weight: bold;
color: #444;
font-size: 14px;
}
input {
font-size: 14px;
}
input[type="text"] {
border-radius: 5px;
margin: 10px 0;
background: #fff;
border: 1px solid #ccc;
color: #777;
max-width: 100%;
outline: none;
padding: 7px 8px;
}
input[type="submit"] {
border-radius: 5px;
margin: 10px 0;
background: #0088B2;
color: #fff;
padding: 8px 14px;
font-weight: bold;
border: none;
cursor: pointer;
}
textarea{
border-radius: 5px;
margin: 10px 0;
background: #fff;
border: 1px solid #ccc;
color: #777;
max-width: 100%;
outline: none;
padding: 7px 8px;
}
input[type="submit"]:hover {
background: #444;
}
Я думаю, вы используете неправильное свойство, которое вам нужно в этом случае для формы, это text-align вместо align-content (которое является свойством контейнера flexbox):
Я бы также рекомендовал два других решения.
Во-первых, добавить отступы к форме и добавить 100% ширины к элементам ввода, это не будет центрироваться, но будет выглядеть очень красиво.
Пример: https://jsfiddle.net/ttbeobLm/
Второй вариант аналогичен, но с добавлением контейнера внутрь формы, добавлением ширины к контейнеру и его центрированием.
Пример: https://jsfiddle.net/ttbeobLm/1/
Поместите форму в div с классом и установите для нее значение float none.
Я также рекомендую вам работать с бутстрапом, и когда вы ставите класс или стиль с изменением размера: нет более красивого и стилизованного. (в начальной загрузке у вас есть предопределенные классы для всех видов элементов, например, для входных данных у вас есть класс управления формой, который делает входные данные очень приятными)
Чтобы центрировать элементы вашей формы (
inputs
иlabels
), вы можете использоватьtext-align: center
, как вам было сказано ранее.Однако, поскольку вы используете
Bootstrap
его, вы также можете использовать предопределенный класс,Bootstrap
вызывая егоtext-center
непосредственно в форме.На самом деле вы можете использовать
text-align: center
илиtext-center
наinputs
иlabel
, потому что они имеют свойство по умолчаниюdisplay: inline
, которое заставляет их обрабатываться так, как если бы они были текстом и, следовательно, могут быть центрированы.Если бы элементы, содержащиеся в форме, имели, в противном случае, свойство
display: block
, они не были бы центрированы с ранее названными свойствами.Кроме того, вы должны удалить свойство
align-content: center;
из своего CSS, так как оно вступит в силу только в том случае, если вы установилиdisplay: flex
свойство (flexbox) для формы.Ваш исправленный пример: