BugWP logo BugWP
Back to Community
Home / Community / General

How to Center Text and Captions in Your MetaSlider Slideshow

36 threads Sep 9, 2025

Content

One of the most common questions users have about the 'Slider, Gallery, and Carousel by MetaSlider – Image Slider, Video Slider' plugin is how to style the text that appears on their slides. A frequent request is to center-align slide captions for a more polished, professional look. This is a common design need, but the solution isn't always immediately obvious within the plugin's interface.

Why Centering Text Requires CSS

The free version of MetaSlider provides a caption field for adding text to each slide, but it offers limited built-in styling options for positioning that text. The positioning of captions is primarily controlled by the theme's styles and the specific slider engine's default CSS. This means that to achieve a custom layout—like perfectly centered text—you need to add a small amount of custom CSS code. This approach gives you maximum control over the appearance without modifying the plugin's core files.

How to Center Captions Using Flexbox CSS

Based on the support threads, the recommended method from the MetaSlider team is to use modern Flexbox CSS rules. This is a powerful and efficient way to center content both vertically and horizontally. Here’s how you can do it:

  1. Navigate to your WordPress dashboard.
  2. Go to MetaSlider -> Settings.
  3. Click on the Advanced tab.
  4. Locate the Custom CSS text box.
  5. Paste the following CSS code snippet: 
    .metaslider .caption {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}
  6. Click Save Changes.

This code targets the caption container within your slideshow and uses Flexbox to center its content. The !important rules help ensure these styles override any other conflicting CSS from your theme or the plugin.

Testing and Refining the Result

After saving the CSS, view the page containing your slider to see the changes. If the text is not perfectly centered, you may need to make further adjustments. The specific CSS selectors can sometimes vary slightly depending on the slide type (e.g., image, video) and the slider engine (e.g., FlexSlider, Nivo Slider) you are using. If the above code doesn't work perfectly, try inspecting the element with your browser's developer tools to identify the exact class names used for your captions and adjust the CSS selector accordingly.

Conclusion

Centering text in a MetaSlider slideshow is a typical customization that requires adding custom CSS, as the free version does not have a one-click option for this specific styling. Using the Flexbox method is a robust and widely supported solution. For more advanced design needs, such as adding buttons or layered text over images, the MetaSlider Pro version offers a 'Layer Slide' feature that provides more built-in design tools.

Related Support Threads Support