En muchas ocasiones tenemos problemas para alinear diferentes items en una sola linea. A veces en una linea cada item debe poder alinearse independientemente a la izquierda, al centro o a la derecha.
Veamos como podemos hacerlo sin utilizar bootstrap.
1) Primero creemos la estructura HTML
Creamos un DIV contenedor cuya clase sera "Container" y tendra adentro tres DIVs con items que se alinearan a la izquierda, derecha y centro.
- El div con la clase "left" alineara su(s) item(s) a la izquierda.
- El div con la clase "right" alineara su(s) item(s) a la derecha.
- El div con la clase "center" alineara su(s) item(s) al centro.
Ahora creamos el css.
2) Código CSS
La clase Container tendra la propiedad text-align en el valor center. Las siguientes clases left y right usaran el float para alinear sus elementos, "left" y "right" según la clase.
La clase center usara la propiedad display con valor inline-block. Esto con el propósito, de el div que ocupara el centro no abarque todo el espacio de la pagina sino se mantenga en el centro de la misma.
Aquí podemos ver el resultado:
Espero que sea de ayuda, saludos.
No hay comentarios:
Publicar un comentario