38-alinear en css

Para centrar un elemento de bloque como un <div> use margin:auto

Si estabelecemos un ancho evitaremos que se salga del contenedor

El elemento ocupara el ancho especificado y el espacio restante se dividira en partes iguales en ambos lados

ejemplo

Este elemento div esta centrado

Codigo del ejemplo

<div style=" margin: auto; width: 50%;border: 3px solid green;padding: 10px;">
<p >Este elemento <b>div</b> esta centrado</p>
</div><br>    
    

Nota La alineación central no tiene efecto si el widthla propiedad no está establecida (o configurado al 100%).

...

Texto alineado al centro

Para alinear un texto al centro tendremos que usar la propriedad text-align: center

ejemplo

Este texto esta linedo l centro

Codigo del ejemplo

<div style="text-align: center; border: 3px solid green;">
<p>Este texto esta linedo l centro</p>
</div><br>
        

centrar una imagen

Pra centrar una imagen usamos las propriedes text-align:center y convertemos el elemento en block

Podemos alinar la foto a la esquierda o derecha usando la propriedad text-align:left o text-align:right

Alineacion con float

Podemos alinear una imagen con la propriedad float:right o float-left

En caso que la imagen este dentro de un div o contenedor este debe tener la propriedad display:inline-block para que se quede en su sitio, o sea dentro del div

Centrar verticalmente: usar relleno

Para centrar elementos hay muchas formas de hacerlo, una de ellas es usando relleno (padding) del Top y Buttom

ejemplo

Estoy centrado verticamente

Si queremos tambien centrar nuestro texto al centro, horizontalmente y verticalmente podemos usar padding y text-align: center:

ejemplo

Estoy centrado horizontalmente y verticalmente

ejemplo del codig

ss="alerta-oscura">

        <style>
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
</style>
    

Centrar verticalmente - Uso de Flexbox

También puede usar flexbox para centrar las cosas. Solo tenga en cuenta que flexbox no es compatible con IE10 y versiones anteriores:

Estoy centrado vertical y horizontalmente

---

Ir al indice