Cómo centrar contenido con CSS de manera efectiva

jotatru · 16 Nov 2016

Les recomiendo este sitio para ayudarlos a centrar contenido con CSS.

No siempre funciona de una, a veces hay que tener en cuenta las propiedades del elemento padre al que queremos centrar para que el css que genere no se vea afectado, pero es muy util para guiarnos sobre que tipo de solución nos conviene encarar!

How to Center in CSS

Captura de pantalla 2016-11-16 a las 17.37.52.webp

Captura de pantalla 2016-11-16 a las 17.38.02.webp

belial9826 · 16 Nov 2016

Se ve interesante. Hay que probarla 😀

Plaga · 16 Nov 2016

No sabía que existía una herramienta así, gracias por compartir, seguramente me sera útil en el futuro :encouragement:

Jhoa · 16 Nov 2016

Que interesante! Lo probaré a ver que tal. Gracias por tu aporte!

Qytanius · 16 Nov 2016

Me parece complicada y podría confundir a más de uno. Pero igual sirve de algo.

Aunque si tienes bien identificado el espaciado en CSS, esto está por demás y más bien estorba

(perdón por el comentario, probablemente a más de uno no le agradará)

jotatru · 18 Nov 2016

Qytanius dijo:
Me parece complicada y podría confundir a más de uno. Pero igual sirve de algo.

Aunque si tienes bien identificado el espaciado en CSS, esto está por demás y más bien estorba

(perdón por el comentario, probablemente a más de uno no le agradará)

Hasta cierto punto coincido, en mi trabajo cuando alguien que no sabe de css pide ayuda para centrar verticalmente y no hay tiempo para ayudarle, recomendar la herramienta sirve. Pero es verdad que cuando ya sabes de css, es más fácil meter mano y listo. Voy a intentar hacer un post recomendando las formas más compatibles para centrar, y que sirva de complemento

Enviado desde mi LG-D855 mediante Tapatalk

NRK79 · 21 Nov 2016

Para centrar elementos es muy importante conocer los modelos de caja en css:
- Los elementos de bloque (display: block) ocupan por defecto todo el espacio disponible horizontalmente aunque su contenido sea pequeño, por eso se situan uno debajo del otro.
- Los elementos de bloque y de linea (display: inline-block) ocupan solo el espacio necesario para mostrar su contenido y por defecto se colocaran en la misma línea siempre que haya espacio.

Un error muy frecuente es intentar centrar un texto dentro de un elemento de bloque (div) con margin:0 auto ya que lo que estamos haciendo realmente aqui es centrar el div que de por si ocupa todo el ancho y no se puede centrar. En este caso centrariamos el texto con text-align: center

Para centrar un texto dentro de un elemento inline-block tendrás que usar text-align: center no en el propio elemento inline-block sino en el elemento contenedor.

Y por último para centrar cajas usamos el tradicional width: ..px margin: 0 auto

smyrna · 21 Nov 2016

Yo también pienso que con controlar un poco de css, eso lo puedes hacer de manera rápida. Pero siempre viene bien conocer nuevas herramientas. Gracias por compartir.

- - - Actualizado - - -

NRK79 dijo:
Para centrar elementos es muy importante conocer los modelos de caja en css:
- Los elementos de bloque (display: block) ocupan por defecto todo el espacio disponible horizontalmente aunque su contenido sea pequeño, por eso se situan uno debajo del otro.
- Los elementos de bloque y de linea (display: inline-block) ocupan solo el espacio necesario para mostrar su contenido y por defecto se colocaran en la misma línea siempre que haya espacio.

Un error muy frecuente es intentar centrar un texto dentro de un elemento de bloque (div) con margin:0 auto ya que lo que estamos haciendo realmente aqui es centrar el div que de por si ocupa todo el ancho y no se puede centrar. En este caso centrariamos el texto con text-align: center

Para centrar un texto dentro de un elemento inline-block tendrás que usar text-align: center no en el propio elemento inline-block sino en el elemento contenedor.

Y por último para centrar cajas usamos el tradicional width: ..px margin: 0 auto

El famoso margin: 0 auto que tanto se usa...Por cierto, en esta conjunta(http://bit.ly/2fWBVHq) compramos unos cursos que son excelentes y explican todo eso de posicionamiento de elementos con css (modelo de caja, display inline, block etc).

Lo digo por si os interesa, para comprarlo con los descuentos del blackfriday.

Cómo centrar contenido con CSS de manera efectiva

jotatru

belial9826

Plaga

Jhoa

Qytanius

jotatru

NRK79

smyrna

Temas similares