[SOLUCIONADO] Como centrar un FORM

hayegesa · #1 (**permalink**) 19/05/2015, 08:02

Hola amigos del foro, hoy me he encontrado con un pequeño problema, se la manera de solucionarlo alternativamente, pero quisiera saber la manera correcta.

CASO:

tengo un form de 80% de width y quiero centrarlo, lo esta conteniendo el body que tiene valor 100% width, NO ESTA DENTRO DE NINGUN DIV, he intentado centrarlo con las tipica etiquetas <center> pero no funciona el body tiene margin: 0 auto; las he cambiado y nada, he colocado align: center; y tampoco, alguien tiene alguna otra forma de que se centre, que no vaya ser text-align que de por cierto no funciona en este caso anexo codigo:

PHP - form (que lo incluyo luego en el index con un include )

Código:

<?php
if (isset($_SESSION['ruta'])) {
	echo '
			<link rel="stylesheet" href="'.$_SESSION['ruta'].'Lenguajes/CSS/Buscador.css" type="text/css" />
			<form method="post" id="Contenedor-Buscador">
				<input name="campo" placeholder="Escribe el texto Biblico o una palabra que se relacione..." id="Buscador" />
				<span id="TextBusquedad">Buscar en:</span>
				<select id="SelectBuscador">
					<option value="TODO">Todo</option>
					<option value="BIBLIAJS">Biblia de Jerusalén</option>
					<option value="BIBLIARV">Biblia Reina Valera</option>
					<option value="PROFESIAS">Profesias</option>
					<option value="REFLEXIONES">Reflexiones</option>
			</select>	
			</form>';
} 
?>

ahora el css de ese PHP:

Código:

#Contenedor-Buscador {
	position: absolute;
	width: 80%;
	height: 20%;
	top: 25%;
	background: #81BEF7;
}
#Buscador {
	position:relative;
	width: 80%;
	height: 50px;
	padding-left: 15px;
	font: bold 25px Arial, Helvetica, sans-serif;
	border-radius: 10px;
	border: solid 2px #81BEF7;
}
#TextBusquedad {
	font: 15px Arial, Helvetica, sans-serif;
}
#SelectBuscador {
 	
}

ahora, el css estandar de toda la web (que enlace al index)

Código:

body {
	margin: 0; // AQUI LE COLOCO AUTO SI NO QUE SE LO QUITO PORQUE AHORA NO ME SIRVE xd JEJEJE :)
	padding: 0;
}
#Opacidad {
	background-color: #FFFFFF;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -100;
	opacity: 0.5;
}

Por ultimo, la web normal :)

Código:

<html>
	<?php //INCLUDE DE CONFIGURACION
	$_SESSION['seccion'] = "";
	include_once ('Configuracion/Ruta.php');
	include_once (''.$_SESSION['ruta'].'Configuracion/Constantes.php');
	?>
	<head>
		<link rel="stylesheet" href="<?php echo $_SESSION['ruta'].CSSestandar; ?>" type="text/css" />
		<link rel="stylesheet" href="Lenguajes/CSS/Inicio.css" type="text/css" />
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
		<title><?php echo Nombre; ?></title>
	</head>
	<body>
		<iframe id="video-background" src="//www.youtube.com/embed/okGcksYM0N8?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;html5=1&amp;allowfullscreen=true&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
	<div id="Opacidad"></div>
	<div id="Contenedor-total"></div>
	<?php include_once (''.$_SESSION['ruta'].'Estandares/Logo.php'); ?>
	<?php include_once (''.$_SESSION['ruta'].'Estandares/Buscador.php'); ?>
	</body>
</html>

NueveReinas · #2 (**permalink**) 19/05/2015, 08:04

Al contenedor le das un margin:0 auto;, y eso ya debería centrarlo.

hayegesa · #3 (**permalink**) 19/05/2015, 08:06

como te digo no funciona :)

hayegesa · #4 (**permalink**) 19/05/2015, 08:08

Código:

body {
	margin: 0 auto;
	padding: 0;
}
#Opacidad {
	background-color: #FFFFFF;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -100;
	opacity: 0.5;
}

hayegesa · #5 (**permalink**) 19/05/2015, 08:12

La solucion alternativ es esa magin: 0 auto DENTRO DE UN DIV CONTENEDOR, pero no quiero meterlo dentro de un div, quiero dejarlo a pelo con el body y el body tiene margin: 0 auto;...

NueveReinas · #6 (**permalink**) 19/05/2015, 08:14

Entonces prueba con HTML4:

Código HTML:

Ver original<div align="center">
<!-- CONTENIDO -->
</div>

hayegesa · #7 (**permalink**) 19/05/2015, 08:23

Nada amigo como te digo esas etiquetas ya las utilice y nada, como te digo me cenra el contenido del FORM, pero no me centrar el FORM que es lo que necesito :(

hayegesa · #8 (**permalink**) 19/05/2015, 08:33

la unica solucion que veo es colocar un padding-left y no matarme la cabeza esa es una de las alternativas que tenia pero quiero hacerlo de la forma correcta, la idea seria

width: 80%;
padding-left: 20%;
y quedaria centrado a la mala pero queda -.- no se porque las etiquetas no me agarran al pinche FORM eso si que extresa -.-

esperare hasta mañana haber si alguien encuentra solucion a mi martirio :(

pzin · #9 (**permalink**) 19/05/2015, 13:40

Los márgenes automáticos funcionan perfectamente: http://jsfiddle.net/zfrw45jL

Pero si tu elemento tiene posición fija o absoluta entonces no. Pero en ese caso, en lugar de hacer la guarrada del padding, usa left y/o right:

hayegesa · #10 (**permalink**) 19/05/2015, 16:33

Pzin +1 jejeje tienes razon se ve olvidaba por completo la funcion left XD, sinceramente con todo esto del automatico y porcentajes se me habia pasado por alto, tema resuelto, gracias y si tienes razon absoluta no es un igual que un automatico o un relative, en fin... gracias nuevamente.