Hoy vamos hablar de cómo alinear los elementos usando CSS, pero antes déjame que te cuente una cosa:

Cada 2 jueves mando un correo.

Bueno, mando muchos más, pero ese es especial.

Se lo mando a mis suscriptores.

Tiene tanto valor que debería ser de pago.

De momento es gratis, pero en breve dejará de serlo.

En cada uno de esos correos comparto una historia interesante que quizá te haga pensar y mejorar en tu negocio.

Además, al darte de alta te voy a regalar un audio de 7 minutos en el que explico:

* Las 2 únicas cosas que necesitas para que tu negocio tenga éxito en internet. No 25, ni 100, ni 1000, sólo 2 que no son ni una web ni un hosting por muy loco que te pueda parecer.

* Cómo saber seleccionar a qué dedicar tu tiempo y tus esfuerzos usando la técnica de toma de decisiones que utilizó Jeff Bezos para decidir si intentar montar Amazon o seguir con su trabajo por cuenta ajena.

En cuanto la lista sea de pago, dejaré de regalar el audio.

Apúntate ahora mismo en www.pampua.es/regalo o deja pasar esta oportunidad, tu mismo…

Total, si no te gustan los mails que mando puedes darte de baja…

Te lo digo por última vez: pampua.es/regalo

Cómo alinear elementos con CSS en WordPress

Por defecto los contenidos que creamos se van alineando en la parte superior izquierda de nuestra web, pero podemos alinearlos en otras posiciones.

Centrar elementos horizontalmente

La forma más sencilla es con la etiqueta en el html aunque como íbamos a hablar de CSS os cuento otras opciones que tenéis:

Si se trata de un texto, podéis usar: text-align: center;

Si se trata de un bloque, podemos usar margin-right:auto

Y si son varios bloques lo más sencillo es encerrarlos en un bloque padre y asignarle las propiedades: display: flex;

  justify-content: center;

See the Pen bQPbQZ by Ramon (@pampua) on CodePen.

Alinear elementos a la derecha

Lo más habitual es tratar de poner una imagen a la derecha del texto, pero antes de entrar en detalle tengo que explicarte la diferencia de las 2 opciones que hay, porque dependiendo de como desees mostrar la imagen deberas usar una de las propiedades CSS align o float.

Imágenes alineadas: no permiten ajustar el texto alrededor de ellas, solo puedes colocarlas a las izquierda, derecha o al centro con el texto antes o después de la imagen. Alinear la imagen deja un espacio en blanco al texto siguiente, puedes ver el espacio en blanco si vas a la sección de la imagen alineada. Como verás esta opción te limita bastante el diseño.

Imágenes flotantes: te permitirá que el texto se ajuste alrededor de la imagen como ocurre en un libro o un periódico. las imágenes flotantes aparecen horizontalmente en su sitio.

Es por esto que te recomiendo que en lugar de usar text-align: right para alinear elementos a la derecha, mejor uses float: right; Además puedes definirle los márgenes que te interesen con la opción margin: 0px 3px 6px 9px; El orden es el mismo que en un reloj, el primer valor corresponde arriba (a las 12) el segundo a la derecha (las 3) el tercero abajo (las 6) y el último a la izquierda (las 9). Si sólo indicas un valor se lo aplicará a los 4 lados por igual. También tienes la opción de usar margin-top, margin-right, margin-bottom y margin-left sí sólo deseas aplicar el margen por un lado.

See the Pen alinear a la derecha by Ramon (@pampua) on CodePen.

Atención, un detalle importante sobre la propiedad float: las imágenes flotantes se su...