Vamos a ver un ejemplo.
Creamos los elementos en html
Ahora vamos con el css. Con el atributo float left o right la parte iquierda y derecha de una forma rápida podemos ubicar el contenido de la derecha e izquierda.LogoMenu
.left{ float: left; background:blue } .right{ float: right; background:red } .center{ background:green;
Pero todavía no obtenemos el resultado esperado, porque con float left y right estos div su ancho se adapta al de su contenido pero el del centro todavía ocupa todo el espacio disponible.
para conseguir que el ancho del div del centro se adapte al de su contenido tenemos que indicar display:inline-block y para que quede centrado según el espacio disponible, le indicamos al contenedor de los divs tenga text-align:center.
.container{ text-align:center } .left{ float: left; background:blue } .right{ float: right; background:red } .center{ background:green; display:inline-block }
Y ahora ya tenemos el resultado deseado
Demo de ejemplo
Otra forma de centrar el div central es que tenga un ancho fijo y entonces asignamos a la propiedad margin el valor 0 auto.
Demo margin igual 0 auto
Gracias!!!!
ResponderEliminarMuchas gracias... De Eduardo Ramírez
ResponderEliminarMuy bien Rapids y al grano gracias
ResponderEliminarmuchisimas gracias!!!!
ResponderEliminargracias.
ResponderEliminarme valió de mucho
Muchas gracias, estuve buscando en muchos lados y esto solucino lo que yo queria.
ResponderEliminarGracias!!!!
ResponderEliminarGRACIAS
ResponderEliminarMuchas gracias ;)
ResponderEliminarHola, muchas gracias por compartir tus conocimientos, estoy buscando una solución similar pero no logro dar con ella. Resulta que tengo dos cajas dentro de un div horizontal (un logo y un enlace). Quiero que el enlace me quede a la derecha del div contenedor y el logo en el centro, pero en el centro del div, no en el centro del espacio restante. No se si me explico. Dicho de otra forma: quiero espacio vacío hasta el centro, el logo en el centro (justo en el centro del div, para que quede centrado en la pantalla) y a la derecha el texto con el enlace...Si ppudiera adjuntar un archivo con la imagen...Muchas gracias de antemano!!
ResponderEliminarCreo que la solución podría ser que agregaras una caja mas. Es decir un div con tres contenedores: el primero vacio con un width del 40%, el segundo con el logo y un width del 20%, y el tercero con el enlace y un width del 20%. Asi los tres contenedoreres estaria en un fila y tendrias el logo centrado en la pagina.
EliminarExcelente, pero si trato de ponerle un fondo, se desconfigura.
ResponderEliminarPor ejemplo color negro.
esto es una mierda
ResponderEliminarq calida
ResponderEliminarthank you bro!!
ResponderEliminarmil millones de gracias!
ResponderEliminarMuchas gracias, llevaba dias intentando recordar como hacerlo y no encontraba
ResponderEliminar