# Image Accordion Preset - align text vertically

**URL:** <https://community.sitejet.io/t/image-accordion-preset-align-text-vertically/3924>\
**Category:** Website Builder\
**Tags:** cms\_presets, cms\_code\
**Created:** [November 9, 2024, 2:04pm UTC](https://community.sitejet.io/t/image-accordion-preset-align-text-vertically/3924 "2024-11-09T14:04:41Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Richard\_Honey](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/richard_honey/32/2905_2.png) [@Richard\_Honey](https://community.sitejet.io/u/Richard_Honey)\
**Post date:** [November 9, 2024, 2:04pm UTC](https://community.sitejet.io/t/image-accordion-preset-align-text-vertically/3924/1 "2024-11-09T14:04:41Z")

</div>

Is there a way to vertically align (top to bottom) the overlay text in the image accordion preset?

 ![Image accordion preset text align](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/0/0917f72e4f974dc60aebb103611325d01b3d3850.jpeg)

I have tried different css in the html field, but nothing works.  
💡 Note: It aligns to the bottom when the “bottom” animation is selected, but it centers automatically in the middle for “blur”, “background” and “zoom” animations.

[Site link](https://cms.sitehub.io/1014044)

---

<div class="post-metadata">

**Author:** ![Ronnie](https://avatars.discourse-cdn.com/v4/letter/r/3da27b/32.png) [@Ronnie](https://community.sitejet.io/u/Ronnie)\
**Post date:** [November 11, 2024, 3:01pm UTC](https://community.sitejet.io/t/image-accordion-preset-align-text-vertically/3924/2 "2024-11-11T15:01:01Z")

</div>

Hi @Richard_Honey. Unfortunately there is no setting to change the text alignment, but you can use some CSS to achieve the result you want. You can use the `.ed-element.preset-image-accordion-v4-default .image-accordion-trigger a > span` selector that is used in the Preset CSS.

For example: To align to the top you could add this snippet to the bottom of your CSS code

```auto
.ed-element.preset-image-accordion-v4-default .image-accordion-trigger a > span {
      top: 10%;
}

```

Change the value to 90% instead of 10% and it aligns to the bottom. You can also use pixel values if you want.

Hope this helps!

---

<div class="post-metadata">

**Author:** ![Richard\_Honey](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/richard_honey/32/2905_2.png) [@Richard\_Honey](https://community.sitejet.io/u/Richard_Honey)\
**Post date:** [November 11, 2024, 7:59pm UTC](https://community.sitejet.io/t/image-accordion-preset-align-text-vertically/3924/3 "2024-11-11T19:59:51Z")

</div>

Thank you, Ronnie!

It worked 😀 but in this case there were some other technicalities.

💡 Note: If the active trigger background is set to a different colour, it will result in something like this:

 ![css top](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/4/4f2026ce647749650dcee3a7e55b1613d7593174.jpeg)

This is because the CSS properties `top` and `bottom` repositions the whole `<span>` element. For some reason, targeting only the `<p>` element inside it didn’t work, so I used `padding-top` instead.

The complete solution for this specific use case is then:

> `.ed-element.preset-image-accordion-v4-default .image-accordion-trigger a > span { padding-top: 90%; }`

**This** (easier?) solution also worked:

 ![padding-top](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/c/ca96303d0ae7fb67cdc916cb06fefa7f6504c9f8.jpeg)

---

<div class="post-metadata">

**Author:** ![Ronnie](https://avatars.discourse-cdn.com/v4/letter/r/3da27b/32.png) [@Ronnie](https://community.sitejet.io/u/Ronnie)\
**Post date:** [November 13, 2024, 1:07pm UTC](https://community.sitejet.io/t/image-accordion-preset-align-text-vertically/3924/4 "2024-11-13T13:07:38Z")

</div>

You’re right, i did not consider the hover effect. But i’m glad you found a solution that works for you!

The reason that targeting the p element did not work is that it is positioned via flex-settings. So, for example, you could have also used a `justify-content: flex-end` on the span element instead to move the text element to the bottom.

That’s what I personally like about Sitejet, there are many ways to achieve what you want and you can choose what suits you best.

---

<div class="post-metadata">

**Author:** ![Richard\_Honey](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/richard_honey/32/2905_2.png) [@Richard\_Honey](https://community.sitejet.io/u/Richard_Honey)\
**Post date:** [November 13, 2024, 4:54pm UTC](https://community.sitejet.io/t/image-accordion-preset-align-text-vertically/3924/5 "2024-11-13T16:54:32Z")

</div>

Thanks Ronnie.  
I would never get to the solution without your help. 💪

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [November 18, 2024, 8:05am UTC](https://community.sitejet.io/t/image-accordion-preset-align-text-vertically/3924/6 "2024-11-18T08:05:48Z")

</div>

Closed on November 18, 2024, 8:05am UTC