How to Vertically Center the Soliloquy Caption

Would you like to vertically center your Soliloquy captions? This is easily done with a little bit of CSS. We’ll walk you through how to vertically center your captions!

This tutorial is a little more technical as it requires basic knowledge of HTML and CSS.

Setup

Setup

Step 1 – Install and activate the CSS Addon

Your first step will be to install and activate the Soliloquy CSS Addon.

If you need any assistance in installing addons, please take a look at this article.

For this instance, we’ll be installing the CSS Addon.

Step 2 – Create or edit your slider

Next, create a new slider or edit an existing one. You can follow along with our documentation for creating your first slider.

Step 3 – Edit your slider images

Next, you’ll need to edit your images and add your captions and links.

To do this, click the blue pencil icon to open the Edit Item window.

Step 4 – Add the captions

Inside the Caption field, add your captions.

Using the right and left arrow keys in the top right corner of the Edit Item window, you can navigate through each slider image adding the caption you wish to appear. Remember to click Save Metadata after each time you add your caption.

Step 5 – The CSS

Below is the CSS we’ve used in our demo.

You’ll need to change this ID number to match your slider ID number. You can find this by looking in the sidebar of your slider edit screen.

For more information on how to find your slider ID number you can read this article.

[css]#soliloquy-container-508464 .soliloquy-caption {
top: 50%;
/* Half of the height specified below, as a minus number
* e.g. if your caption height = 80px, margin-top = -40px */
margin-top: -20px;
}
#soliloquy-container-508464 .soliloquy-caption .soliloquy-caption-inside {
height: 40px;
}[/css]

Be sure to update the -508464 with your own slider ID number

If you’d like to change this for all sliders, just add the CSS to the WordPress customizer.

Check out our demo of this in action!

Once you click Publish or Update on your slider, you’re all set! View your slider to see the custom styling applied following our guide, you can then go back and edit any of the HTML or CSS to further suit your specific needs.

Would you like to remove the default caption background? Have a look at our article on How to Remove the Default Caption Background.

Soliloquy Documentation