canter embeds

How To Center Embeds – Embedded Images And Embedded Videos

A few days ago I wrote a post about getting free images for blogs from Getty Images. I was pretty excited to discover this option as I use images a lot on my blogs. But to use the free images you have to use an embed code from Getty’s. I had no problem embedding the free image on my blog, but for the life of me I could not figure out how to center the embedded image. It took me hours to figure it out. In this post I will show you how to center embeds, namely how to center both, embedded images and embedded videos.

How To Center Embedded Images

The image below is a centered embedded image. I got the image from Getty Images for free.

You cannot center the embedded image in the WordPress editor by simply clicking on the image and then clicking on the centering option tool. (The editor works well for centering regular images that you add to your post from your Media Library.)

I have tested different ways of centering embedded images and the only way which finally worked for me, was to add a division code at the beginning of the embed and a closing tag at the end of the embed code. This has to be added in the text editor.

Code to Center Embeds (Images)

At the beginning of the embed code add
<div class=”aligncenter”>

At the end of the embed code add the closing tag

Image 1 – in this image I am showing you the embedded image code after I added the division tags.

Embedded Image Code In WordPress Text Editor Image 1

centered embedded image

How To Center Embedded Videos

Sometimes I like to use embedded videos because they give me a choice to select the size that is suitable for the post I am writing. To center the embedded code use the same centered div commands as I showed you above. Add the codes in the text editor as shown in the image below.

 Code to Center Embeds (Video)

Embedded Video Code In WordPress Text Editor

center embedded videos

The result of adding this code is a beautifully centered video. Enjoy the video. It is a really nice inspirational video .

Hope you enjoyed learning how to center embeds, namely the how to center embedded images that you get for free from Getty Images. I also showed you how to center embedded videos. I have not tried this method of centering for images other than Getty’s, but I am optimistic, and I believe they will work just the same.

In the next post I will show you how to center  YouTube video URLs, which is different from embeds and also not straightforward.


, , , , ,

2 Responses to How To Center Embeds – Embedded Images And Embedded Videos

  1. Steven Spiller December 30, 2014 at 8:21 am #

    Hi Dita,

    Thanks for the post, very useful. I hate it that the visual editor in WordPress is so restricted – luckily there are ways to “improve” it like the WP Edit & Ultimate TinyMCE plugins which give you the missing buttons and extra buttons.

    I use the free version of WP Edit as it is a little more user-friendly than Ultimate, but that is personal preference. These help by not forcing you to learn some HTML code which should in by default. Knowing some HTML is a good thing, but not at the top of most bloggers list!

    Take care and have fun!
    Steven Spiller recently posted…My First WordPress Plugin!My Profile

    • Dita Irvine January 2, 2015 at 1:31 pm #

      Hi Steven,
      Thanks for stopping by. I use the extra editors too but they certainly do not address the issue of the centering embeds or Youtube video Urls. Hopefully WP will come up with a solution for centering these with ease, in a near future. That’s like basics.
      Dita Irvine recently posted…Way To Keep New Year’s ResolutionsMy Profile