Inicia sesión


Centrado en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales en centrado - centered en CSS3.
Background:display, calc(), flex
"Hace 44 años pusimos a un hombre en la luna, pero todavía no podemos centrar verticalmente las cosas en CSS —" —James Anderson.
Todas las prácticas mencionadas en la siguiente parte, lo he experimentado en mi propio proyecto. Esas prácticas tienen tanto ventajas como desventajas. Ustedes pueden elegir la solución más adecuada según su preferencia.
display: flex+ margin: auto sin límite de ancho y alto
<style>
  main{
    width: 100%;
    min-height: 152px;
    display: flex;
  }
  main > span {
    background: #b4a078;
    color: white;
    margin: auto;
    padding: .3em 1em .5em;
    border-radius: 3px;
    box-shadow: 0 0 .5em #b4a078;
  }
</style>

<main>
    <span>¡Centro, por favor!</span>
</main>
Ver resultado
display: grid no limit to width & height
<style>
  main{
    width: 100%;
    min-height: 152px;
    display: grid;
    justify-content: center;
    align-items: center;
  }
  main > span {
    background: #b4a078;
    color: white;
    padding: .3em 1em .5em;
    border-radius: 3px;
    box-shadow: 0 0 .5em #b4a078;
  }
</style>

<main>
    <span>¡Centro, por favor!</span>
</main>
Ver resultado


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-03-11
  • Categorias: Diseño Web CSS3 html5 WebSite Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Historia de los sistemas operativos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Microsoft Windows Apple Ordenador Noticias Tutorial Informatica

Vacía tu mente, no tengas forma, ni figura

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Estilo Noticias Tutorial

Justificante de pago de Google Adsense

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Google Adsense WebSite Marketing Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial