Embedding an Instagram post in WordPress is very easy, especially with the new Gutenberg editor.

The bad news is that, usually, the embedded Instagram posts will be aligned to the left side, which will look pretty ugly.

But, in this tutorial, I’ll show you how to easily center align them as well!

Let’s get to it!

Embed an Instagram Post in WordPress

I’ll show you how to do it using the Gutenberg editor (two different methods), as well as the Classic Editor!

Method 1: Using Gutenberg’s Embeds block

Step 1

Copy the link of the Instagram post.

Step 2

Click the + sign in your Gutenberg editor, search for “instagram”, then add the Instagram block from Embeds.

Final step

Paste the Instagram post’s link in the block and click the Embed button.

The Instagram post should be previewed in the editor now.

Method 2: Using Gutenberg’s Custom HTML block

Step 1

Select an Instagram post, click on the 3 horizontal dots at the bottom right, then click on Embed.

Step 2

Click the Copy Embed Code button. You can exclude the caption if you want.

Step 3

In your Gutenberg editor, click the + sign, search for “custom html”, then add the Custom HTML block.

Final Step

Paste the Instagram embed code in the Custom HTML block. It will be a lot of code, don’t panic!

You can click on the Preview button in the block to preview the embedded Instagram post in Gutenberg.

Using the Classic Editor

If you’re still using the Classic Editor, follow the second method above and paste the embed code into the Text editor.

Center Align Embedded Instagram Posts in WordPress

You can continue reading or watch the video.

To center align embedded Instagram posts, you’ll have to add some CSS code in WordPress.

Don’t worry, it’s easy!

Go to Appearance > Customize > Additional CSS and add this code:

.instagram-media{margin:0 auto !important;}

Don’t forget to click the Publish button.

If the embedded Instagram post will be too close to the above and the below paragraphs, change the 0 from the above code with another value. (e.g. 15px, 20px, 33px, and so on).

For example:

.instagram-media{margin:15px auto !important;}

You only need to add this code once and it will automatically center align all embedded Instagram posts that you’ll add in the future.

That’s a Wrap

I hope you found this post useful, and you managed to embed and center align Instagram posts in WordPress!

If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.

You can also hit the follow button on Twitter and subscribe to the YouTube channel.

Don’t forget to share the post to help out others!