Cómo alinear elementos con CSS en WordPress

Apple Podcasts | Google Podcasts | Spotify | Pandora | RSS

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 <center> 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 superponen entre sí, si la propiedad float no se borra. Asegúrate de poner el código de «clear» después de cada sección donde su imagen este flotando. a continuación el código para borrar la propiedad float.

<br style=»clear:both» />

Centrar verticalmente

Comencemos a ver el centrado vertical con CSS.

La mejor forma de centrar verticalmente un elemento inline de varias líneas es usando FlexBox y ¿cómo hacemos esto? Simplemente agregando al padre del elemento las siguientes propiedades: display: flex y align-items: center

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

Y por último es posible que queramos que nuestro elemento esté

Centrado Vertical y Horizontalmente

Lo más fácil para hacer esto es usar FlexBox, solo debemos usar las siguientes propiedades: aling-items: center y justify-content: center dentro del bloque padre.

See the Pen Center with Flexbox by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.

EL PODCAST DE LA SEMANA

Hoy quiero recomendaros Cultura Emprende Radio dirigido y presentado por Cristina Álvarez Pagán, Alejandra Ron-Pedrique y Ángel Calvo Mañas.

Todos los lunes emiten un episodio de 1 hora de duración hablando de temas muy interesantes para los emprendedores y empresarios: marketing online, marca personal, hosting, redes sociales, dirección estratégica, conciliación, etc.

Como siempre, los puedes escuchar en iTunes, iVoox, PlayerFM, etc.

Y esto ha sido todo por hoy, si ya conocías cómo alienar elementos con CSS y has echado algo en falta, cuéntamelo! O si te ha quedado alguna duda o te gustaría que tratase algún tema en concreto pásate por pampua.es y déjame un mensaje; estaré encantado de comentarlo contigo.

O si lo prefieres en los comentarios de iVoox, o por telegram o twitter como @pampua, o en facebook.com/pampua

Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por  Facebook, twitter o incluso por SMS, como quieras, pero compártelo! Recuerda que puedes escucharlo y suscribirte en iTunes, iVoox, Spotify, Youtube y desde la web de pampua.es/podcast.

Y por último estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Puedes ver cómo dejar una reseña en www.pampua.es/resena

El jueves que viene estrenamos la “entrevista del mes” hablaremos con Juan Pablo Alonso que nos explicará los 18 errores más comunes a la hora de crear una página web profesional de servicios.

Muchísimas gracias por escuchar hasta el final, por comentar, por tus “Me gusta” y reseñas. Nos escuchamos la semana que viene llueva, nieve o truene!