Barra de progreso centrada en un div

[zeroflow]

hola amigos de forosdelweb, soy novato en esto de los divs y casi en todo de diseño xD.

busque un poco acerca de mi problema pero no encontre respuesta alguna o no la supe buscar.

tengo un problema con una barra de progreso que esta dentro de un div y no he podido centrar, aqui añado una imagen para que vean mi problema.




el css que utilice fue este:

.UsuarioForo
{
width:120px;
height:17px;
border: thin solid #A9A9A9;
background-color:#E6E6E6;
}

espero me puedan ayudar, se que para ustedes no es nada complicado esto y disculpen mi ignorancia.

[hades87]

prueba a meterle:

margin: 0 auto;

[danistrein]

zeroflow

pon tu barra de progreso dentro de 2 div, te explico:

un div va a ser el que ya tiene ahora:

Código CSS:

.UsuarioForo
{
margin: auto;
width:120px;
height:17px;
border: thin solid #A9A9A9;
background-color:#E6E6E6;
}
 

el otro div tiene que estar dentro del anterior para que centre:

Código CSS:

.centrar
{
margin-top: 3px;
}
 

y listo solo te falta agregar tu barra dentro de los dos div y ya trendras centrada bien la barra.

xD no tome en cuenta el margin: auto; por que si te das cuenta la barra ya se encuentra centrada :P lo que nesesita zeroflow es que se centre de arriba para abajo :P y eso noce como hacerlo pero con margin_top es posible xD, je espero que te sirba y si queda mal modifica los px de margin_top

[SDEK]

Que tal,

Le agregué a tu clase lo necesario para centrar la barra. Considero que con el único div que tienes puedes centrarlo. Solo cambia tu clase por la siguiente:

Código:

 .UsuarioForo {

          border: thin solid #A9A9A9;
		
          background-color:#E6E6E6;

          top: 50%; 
  
          left: 50%;
   
          height: 150px;
		  
          width: 250px;
 
          margin-top: -75px; 
 
          margin-left: -125px; 
 
          position: absolute;
		  
			}

A continuación te explico el efecto que tienen las propiedades que agregué:


top: 50%; /* Posicionas tu Clase a la mitad de la pantalla a partir del borde superior */

left: 50%; /* Posicionas tu Clase a la mitad de la pantalla a partir del borde izquierdo */

margin-top: -75px; /* Restas la mitad de la altura del div a la propiedad "top" para que tu div se centre desde el centro de la imagen y no del borde */

margin-left: -125px; /* Restas la mitad del ancho del div a la propiedad "left" para que tu div se centre desde el centro de la imagen */

position: absolute; /* El centrado es "absoluto" a la pantalla y no relativo a algun otro elemento (div, imagen, tabla, etc) */


Saludos,

[zeroflow]

Iniciado por danistrein

zeroflow

pon tu barra de progreso dentro de 2 div, te explico:

un div va a ser el que ya tiene ahora:

Código CSS:

.UsuarioForo
{
margin: auto;
width:120px;
height:17px;
border: thin solid #A9A9A9;
background-color:#E6E6E6;
}
 

el otro div tiene que estar dentro del anterior para que centre:

Código CSS:

.centrar
{
margin-top: 3px;
}
 

y listo solo te falta agregar tu barra dentro de los dos div y ya trendras centrada bien la barra.

xD no tome en cuenta el margin: auto; por que si te das cuenta la barra ya se encuentra centrada :P lo que nesesita zeroflow es que se centre de arriba para abajo :P y eso noce como hacerlo pero con margin_top es posible xD, je espero que te sirba y si queda mal modifica los px de margin_top

amigos muchas gracias por la oportuna respuesta, gracias a estos espacios de ayuda es que los novatos como yo aprenden, ya solucione el problema usando el metodo de danistrein.

[danistrein]

Iniciado por zeroflow

amigos muchas gracias por la oportuna respuesta, gracias a estos espacios de ayuda es que los novatos como yo aprenden, ya solucione el problema usando el metodo de danistrein.

me alegra que te aya servidor mi ayuda