Genesis Tutorials

Image Vertically Centred Inline With Text

This code enables you to display a text title on the left and a image on the right which is vertically aligned center with your text. On Mobiles, the text displays before the image with the image centered below the text.

Video Demo

Shows the image vertically centered on desktops and underneath the text on mobiles.

Tested using the Breakthrough Pro child theme by StudioPress with a .webp image 2000 pixels in width.


There’s 3 steps for installation :

1. Here’s the HTML which goes in Customize > Breakthrough Pro Settings > Hero Section Headings > Hero Title field.

2. Upload your image to your WordPress media library and swap out the image link in the above HTML from step 1. In this example, i used a .webp image.

3. Copy & paste the CSS from the download folder to the end of your Breakthrough Pro themes style-front.css or style.css file and clear caching.

Download Folder

Leave a Reply

Your email address will not be published. Required fields are marked *