How to center text in carousel

Hello,
I have created a carousel made of a few slides and added a description for each slide.

I would like to automatically center the description of each slide in the middle of the carousel, at the same height as the arrows. Please check image.

As a workaround I have added some margin/paddling but there should be a more elegant and automatic way.

Can you please advise how to achieve this?

Thanks,
dan

Hello Dan,

You can adjust the position of the caption text by clicking on carousel and changing the position in the sidebar.

1 Like

Thanks Eldar!

Hello,
I go back to this “old” question to ask if it possible to to adjust the position of the caption differently for desktop and phone view (in Blocs 2.6.5).

In phone view, it is so and I would like to center text:

I have tried everything, it is centered in desktop and tablet but not in phone.
What can I do?

Thanks,
Dan

Has anyone an idea? I have tried everything to center this text, please help!
Thanks,
dan

I don’t remember the possibilities with Blocs 2.6.5, but have you tried to add a class to your text with a bottom margin ?

Hi @dcaccount,

I don’t have an active version of Blocs 2 (Which was bootstrap 3) on my current MacBook Pro.

You could try adding this code to the page header. (Untested my end, with exception to adding the styles in the Safari Inspector.). This should over-ride the bottom style and align the caption vertically for small breakpoints… but then it might not :sweat_smile:


<style>
@media (max-width: 767px) {
  .carousel-caption {
   top: 50%;
   transform: translateY(-50%);
   bottom: initial;
  }
}
</style>
1 Like

Thanks @Malachiman,
it is much better but not 100% centered. See below:

Is there a way to center it a bit better?
Thanks!
Dan

Do you have any other css that you have added? Be helpful if you have a live link.

It could be padding-top. ?

It is still in my RPI webserver only in LAN, I have not uploaded it yet.

What does it mean, paddling-toIn the custom class of the ext there is no paddling

Ok, as a test, add a style to the CSS I posted above.

padding-top: 0px;

1 Like

It works!!! Thanks, what is the issue I missed? What mistake have I made?
Thanks