Entradas con la etiqueta ‘horizontal’

CSS – Centrar Vertical y Horizontalmente un Elemento

Publicado por Iván Gajate el 14 de octubre de 2014 en css | 1 comentario »

Hay otras formas para centrar un objeto en pantalla, pero esta me resulta la más cómoda.

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: table;

Es importante el display table para que lo centre verticalmente.

Ejemplo en JSfiddle

Lo bueno, es que no necesita tener un tamaño especificado para funcionar bien.
Por supuesto se puede usar para centrar solo verticalmente.
Gracias Irene! 🙂

CSS – Centrar Botones sin Anchura Fija

Publicado por Iván Gajate el 16 de junio de 2014 en css, Desarrollo Web | 1 comentario »

Una cosa muy común es querer centrar los botones de un menú en horizontal sin conocer sus dimensiones.
inline-block al rescate!! 😀
Inline block hace que los elementos se comporten como bloques de texto en línea, y por lo tanto se colocan en horizontal uno a la derecha del otro, y al centrar el contenedor, se centran los botones 🙂

http://jsfiddle.net/yporqueno/dYLxN/

<ul class="botonera">
    <li>Sección 1</li>
    <li>Sección 2</li>
    <li>Sección 3</li>
    <li>Sección 4</li>
</ul>
.botonera {
    text-align: center;
}
 
.botonera>li {
    display: inline-block;
}

Gracias Javi!! 😀