How to Center a Shortcode in WordPress An Example With a Slider How to Center a Shortcode in WordPress An Example With a Slider

How to Center a Shortcode in WordPress – An Example With a Slider

Would you like to create a slider on your homepage or in your post? Or probably you want to place a contact form or any other form on your web-page? All of that is possible to fulfill with the help of shortcodes but not always it’s easy to make a shortcode in your post be located in the center.

If you use a WP plugin to create, for instance, a slider, you can add an element using the plugin’s functionality and then just copy the generated shortcode to paste it in your post or page where you want it to be displayed.

For instance, I use MetaSlider WordPress plugin to create a slider.

I go to MetaSlider -> +New -> Add Slide and upload a bunch of images from the media library. Then I manage the options and click the Save button. Now I should just copy the shortcode to paste it into my post and of course, I do it but…

I don’t want my slider to be located at the left side of the post, though even if I highlight a shortcode and click the center text button in the visual editor, it refuses to work.

So I can make a conclusion that a “text-align” method isn’t suitable in this case.

That’s why I use a margin method and identify it in pixels. You can indicate another amount of pixels for your margin, I prefer 300px. Now I can highlight the shortcode and click the ‘center text’ button in the visual editor. Then I go to the text editor and this is how my shortcode looks now.

<div style=”margin-left: 300px; text-align: center;”>[your slider id]</div>

It works now! At least for the desktop version though.


[metaslider id=”11678″]

Note: This method is applied to any shortcode, no matter what. However, MetaSlider has Advanced Options with the Center Align option available. So you can just click this option checkbox and your slider will be located in the center. You can also stretch it to 100% wide output if required. 

P.S.

Please be sure to specify the right margin in pixels depending on the width and height of your contact form, slider, or any other element you insert with a shortcode. Consider the peculiarities of your WordPress theme.

Hope this was helpful.

Melany H.