OmbuShop Crea Tu Tienda Online

Artículos para el mes: octubre, 2014

Centrado vertical con CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Muchas de las técnicas que utilizamos diariamente con CSS no son intuitivas. En principio, son resultado de experimentos técnicos de desarrolladores web y diseñadores que intentan empujar este lenguaje presentacional hacia nuevos territorios.

Casi todos sabemos cómo centrar un elemento dentro de otro, horizontalmente; por lo general basta con indicar márgenes izquierdo y derecho en auto. El problema surge cuando queremos centrar una caja dentro de otra, de forma vertical.

Veremos a continuación una técnica para realizar centrado vertical con CSS con amplio grado de compatibilidad con navegadores (Chrome, Firefox, Safari, IE8-10). La técnica necesita del posicionamiento absoluto para funcionar, por ende, necesitaremos que la caja contenedora tenga indicado algún posicionamiento diferente a static, por ejemplo: position: relative.

Veamos el ejemplo:

 


#contenedor {
position: relative;
}
#contenido {
height: 60px; /* <– debe estar definida */
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

/* —————————- */
/* Detalles cosméticos */

* {
box-sizing: border-box;
}
body {
background: #fff;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size: 20px;
}
#contenedor {
background: #9f0;
width: 70%;
height: 150px;
margin: 1em auto;
border: 4px solid #000;
}
#contenido {
background: #000;
color: #fff;
font-weight: bold;
text-transform: uppercase;
text-align: center;
width: 95%;
padding: 1em;
}

See the Pen IwJjf by Lucas Mourelle (@lucasmourelle) on CodePen.
0

¡Esperamos que les sirva!

Carla Piccini se suma a OmbuShop

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Tengo el agrado de anunciar que Carla Piccini se suma a OmbuShop como nueva Growth Leader.

El objetivo de Carla será trabajar exclusivamente en el motor de crecimiento de nuestro negocio, generando nuevas alianzas y promoviendo el uso de OmbuShop para pequeñas y medianas empresas sin un canal de ventas online.

Carla Piccini

Carla nos va a ayudar a seguir creciendo y sumando nuevas tiendas, que puedan utilizar nuestra plataforma para potenciar sus ventas online.

¡Bienvenida!