XF 2.2 Vertically align text with image?

[jromaine]

Hi guys,
How can I align this text so that it sits in the middle of the image icon, rather than at the bottom?

How it looks now.



How I want it to look

 

[Old Nick]

What is your current code HTML/CSS ?

 

[jromaine]

Sorry Nico I have no idea?

Where do I look?

 

[Mr Lucky]

Normally you put custom CS stying isn the extra/less template for the style.

In this case you'd either style the image in the html where you have the actual image (e.g. <img style ="vertical-align:middle" src ="whateverthe source is" /)>

Or else give the image a class e.g. <img class="mid" src ="whateverthe source is" /)> and then add to the extra/less template:

.mid
{vertical-align:middle}

 

[jromaine]

Yeah okay Im out of my depths here, I thought there may have been a simple menu option or something.

 

[RobinHood]

Apply alt text of "icon" to the image, and add this to extra.less

.message-content .bbWrapper img[alt=icon] {
    vertical-align: middle;
}

Loom | Free Screen & Video Recording Software

Use Loom to record quick videos of your screen and cam. Explain anything clearly and easily – and skip the meeting. An essential tool for hybrid workplaces.

www.loom.com