Centering Embeds on

One of the cool things handles is media embeds. Instead of messing around with a bunch of embed codes, your site is setup to use oEmbed. This means if you want to share something like a YouTube video, you can just put the YouTube video’s link into your post and we handle the rest.

The tricky thing about embeds though is they can be tough to style if you want to do something specific with them in your post. With some services also provides shortcodes, but those don’t give you full design reign either.

The most common request I see is to center up an embed with a post or page’s body. While it’s hard to apply styles to the embed itself, we can definitely apply styles to an HTML element that surrounds the embed, like a div.

Using CSS Flexbox, it’s then pretty easy to center up that embed. Here’s a video:

The code I use that in video is the following:

<div style="display:flex;justify-content:center;">

// Link to embeddable content here


You can also see it in action on yesterday’s post.

If you have questions specific to your site, contact our staff at

Have a comment? Try to be nice.

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s