How to Position Centered Slider Text with CSS

FAQ  How To  Tutorials  Last Updated: Time to Read: 1 minute

When using the Centered Text/Image layouts in the Layers Slider, the image will follow the content by default because the image follows the content in the HTML order. You can manipulate how the content gets positioned via the Advanced option in the design bar to set the content to use an absolute position. This takes a measure of trial and error depending on the size of your image and slider.

If you use your browser inspector to look at the CSS for the slide, you will see the copy-container  has a position: relative  you need to reset. Here is how to go about it:

  1. In your slider widget, ensure the Centered Image layout and Centered Text layout are selected in the slide toolbar.
  2. Click the Advanced button in the Design bar on the right
  3. Enter the custom class into the class field
  4. See below for the code snippets to use in the CSS box to gain the desired effect, then customize the values to fit your design.

See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets for a detailed tutorial of using the widget custom css option.

This allows us to change where the image sits and ensures it stays centered. Enter custom-slider  into the class field:

To make the content sit below the image, you will need to give it some padding equal to the height of your image:

All you need is absolute  positioning and a higher z-index  than the featured image. Enter overlay-slider  into the class field:

The top and left here are assuming you are using the default Full Width layout and slider height. Experiment with the values to get your content positioned just right.