Centrar un formulario de tallas

[miguelgalannunez]

Hola chicos,

En mi página -> http://store.wrongcompany.com/product/jewelshirt/

encontraréis un formulario de selección de talla donde pone SIZE: y luego ya el campo para elegir la talla correspondiente. Pues bien, me gustaría centrar ese bloque respecto al que tiene en la parte superior (JEWEL, 90€...)

¿¿Cómo puedo hacerlo??

La clase que tengo y he probado para ese bloque es esta.. Pero a la hora de visualizar el contenido en una tablet se mueve y no queda centrado como toca.

.variations {width: 60% !important; margin-left: 95px;}

Muchas gracias!!

[javy7v]

No entiendo muy bien el problema.

Quieres que el <SELECT> de size te salga mas a la derecha para que este alineado con el texto de arriba no ?

No le puedes simplemente darle margin-left hasta colocarlo a tu gusto y ya esta ?

Si tienes problemas con como se ve en otros dispositivos como tablets o moviles al hacer estos cambios , siempre puedes usar media queries.

Por ejemplo :

Código:

@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #0378ad;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('../img/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
}

Asi aplicas los cambios que quieres solo para pantallas de determinado tamaño.

Igual te estoy contando tonterias muy simples losiento pero es que no he entendido bien el problema ;)

[fede5426]

Código CSS:

.variations {
   width: 60% !important; 
   margin:0 auto;
}
 

Con eso queda centrado en el bloque.. Para centrar elementos hay 2 opciones, o le das margenes automáticos, o le asignas text-align:center a su padre, y no te va a hacer falta modificar ningún query siempre va a estar centrado.

Saludos

[miguelgalannunez]

Exacto.. eso era fede5426.. Muchas gracias!!

Con ese margin: 0 auto; es para dejar siempre centrado cualquier contenido??

Muchas gracias chicos!!

[fede5426]

Iniciado por miguelgalannunez

Exacto.. eso era fede5426.. Muchas gracias!!

Con ese margin: 0 auto; es para dejar siempre centrado cualquier contenido??

Muchas gracias chicos!!

Si, darle esos valores a la propiedad margin centra el elemento sin importar el ancho de la ventana del navegador..

Mejor explicado:

El primer valor es el margin-top y el margin-bottom (los 2) y el segundo valor es el margin-left y el margin-right (también los 2), seria exactamente lo mismo colocar "margin: 0 auto 0 auto;" (en orden: top right bottom left).

Lo que hacen los margenes automáticos es autocalcular el porcentaje de pixeles que tienen que ocupar para que el elemento quede centrado. El primer valor (que hace referencia al top y al bottom) no necesariamente tiene que ser 0, lo puse como ejemplo.. si necesitas que arriba y abajo tenga margen, se lo indicas no es problema. El punto es que pongas "auto" a los margenes derecho e izquierdo si queres que quede centrado, o como bien dije antes, le pones "text-align:center" a su contenedor.

[pzin]

De hecho con poner margin: auto; es suficiente. Dice la especificación que los márgenes verticales en este caso serían igual a cero.