EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Instalación Wordpress en local
            Descargar e instalar WordPress en local: pasos a seguir
            27/07/2020
            metodología scrum
            Metodología Scrum para el desarrollo de software ágil
            30/12/2020

            Centrar horizontal y verticalmente en CSS un elemento

            centrar horizontal verticalmente CSS

            centrar horizontal verticalmente CSS

            Tabla de contenidos

            • 1. Centrar vertical y horizontalmente elementos con flexbox
            • 2. Centrar vertical y horizontalmente un texto con line-height y text-align
            • 3. Centrar vertical y horizontalmente una imagen con propiedad transform
            • 4. Alinear un texto verticalmente con una imagen con vertical-align
            • 5. Alinear verticalmente un texto en un div con vertical-align
            • 6. Alinear horizontalmente una imagen con text-align
            • 7. Alinear verticalmente un checkbox con un label

            Existen diversas formas de centrar horizontal y verticalmente un elemento en un contenedor mediante CSS. Cada método es adecuado para una situación concreta y, por ello, es necesario saber cómo funcionan todas las propiedades para reconocer fácilmente qué técnica utilizar en cada caso.

            A continuación se describe cómo se puede realizar el centrado de algunos elementos mediante cajas flexibles, con la propiedad «transform«, con las propiedades «line-height» y «text-align» y con la propiedad vertical-align.

            1. Centrar vertical y horizontalmente elementos con flexbox

            Este es el método más útil porque funciona para todos los elementos que se posicionen dentro de un contenedor. Por tanto, es válido para imágenes, textos, vídeos, etc. Sin embargo, para comprender cómo funciona es necesario tener conocimientos sobre el modelo de caja flexible o flexbox.

            Para utilizar las propiedades de flexbox es necesario crear un contenedor y declararle la propiedad «display: flex«. Para centrar horizontal y verticalmente el contenido utilizaremos las propiedades «justify-content: center» y «align-items:center«.

            div{
                height: 200px;
                background-color: #EEE;
                display:flex;
                justify-content: center;
                align-items: center;
            }


            Ejemplo

            0

            2. Centrar vertical y horizontalmente un texto con line-height y text-align

            Mediante las propiedades line-height y text-align podemos alinear únicamente textos. Así que este método sólo va a ser válido para el centrado de párrafos, encabezados, etc.

            div {
                height: 200px;
                background-color: #EEE;
                text-align: center;
            }
            div h1 {
                line-height: 200px;
            }


            Ejemplo

            dark

            3. Centrar vertical y horizontalmente una imagen con propiedad transform

            Mediante este método se puede alinear tanto vertical como horizontalmente imágenes y contenedores. No es válido para la alineación de textos ya que no tiene en cuenta el tamaño de la letra.

            div {
                height: 300px;
                background-color: #EEE;
                position: relative;
            }
            div img{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
            }


            Ejemplo

            dark

            4. Alinear un texto verticalmente con una imagen con vertical-align

            Con esta técnica podemos alinear un texto a una imagen de forma vertical. Esta propiedad admite los valores top, middle y bottom, entre otros valores.

            img{
                vertical-align: middle;
            }


            Ejemplo

            dark

            5. Alinear verticalmente un texto en un div con vertical-align

            Vamos a alinear un texto en un div con la propiedad vertical-align. Hay que tener en cuenta que esta propiedad no se comporta de la misma manera con todos los elementos. En este caso, haremos uso de las reglas de estilo «display: inline-table» y «display: table: cell».

            div{
               height: 200px; width: 200px;
               background-color: #EEE;
               display: inline-table;
             }
             p{ 
               display: table-cell; 
               vertical-align: middle;
             }


            Ejemplo

            dark

            6. Alinear horizontalmente una imagen con text-align

            Las imágenes se pueden alinear a la izquierda, derecha o centro insertándolas dentro de un div e indicando la propiedad text-align correspondiente.

            .a{text-align: left;}
            .b{text-align: center;}
            .c{text-align: right;}


            Ejemplo

            dark

            7. Alinear verticalmente un checkbox con un label

            Cuando el tamaño del texto no coincide con el tamaño del checkbox, estos dos elementos no quedan alineados verticalmente. Para conseguir esta alineación utilizaremos «vertical-align:middle» y definiremos el tamaño del texto a las dos etiquetas, tal y como se muestra a continuación.

            label, input{
                font-size: 28px;
                vertical-align: middle;
            }


            Ejemplo

            dark

            Compartir

            UD4. CSS Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Metaetiqueta viewport
            • 5. Sombras CSS
            • 6. Gradientes CSS
            • 7. Selector de atributos en CSS
            • 8. Transiciones en CSS
            • 9. Transformaciones en CSS
            • 10. Propiedad overflow
            • 11. Flexbox, modelo de caja flexible
            • 12. Centrar horizontal y verticalmente con CSS
            • 13. Preprocesadores Less y Sass
            • 14. Estilos, elementos y código para la composición de tu web
            • 15. Herramientas útiles y referencias CSS
            • 16. CSS Grid para maquetar contenido con rejillas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results