Carousel Pro Vertical Align Middle - Question | JoomShaper

Carousel Pro Vertical Align Middle

GP

Gianluca Pantaleo

SP Page Builder 1 day ago

Hello, how can i vertical align the text (title, content, button) to the middle, please? https://www.awesomescreenshot.com/image/59239490?key=f1181a6e25c7b68d1b9bc6406331d95d

0
2 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 day ago #220010

Hi

Thanks for contacting us. You can use this CSS in your custom.css file

.sppb-carousel-pro-text{
    text-align: center;
}

-Regards.

0
GP
Gianluca Pantaleo
Accepted Answer
10 hours ago #220057

Sorry, I meant vertical align not horizontal. So I found this solution:

/* --- UNIVERSAL VERTICAL CENTER FOR CAROUSEL PRO --- */

/* 1. Forza la struttura gerarchica a trasmettere l'altezza della slide */
.carosello-pro-homepage .sppb-carousel-pro-inner-content,
.carosello-pro-homepage .sppb-carousel-pro-inner-content > div,
.carosello-pro-homepage .sppb-container {
    height: 100% !important;
    display: flex !important;
    flex-direction: column;
}

/* 2. Rendi la riga un contenitore Flex centrato */
.carosello-pro-homepage .sppb-row {
    display: flex !important;
    align-items: center !important; /* Centra verticalmente */
    justify-content: center !important;
    height: 100% !important;
    min-height: inherit;
    float: none !important;
}

/* 3. Annulla i float di Bootstrap per le colonne interne */
.carosello-pro-homepage .sppb-row > div[class*="sppb-col-"] {
    float: none !important;
    display: block !important;
}

/* 4. Reset Responsivo per Mobile */
@media (max-width: 767px) {
    .carosello-pro-homepage .sppb-row {
        flex-direction: column !important; /* Incolonna gli elementi */
        height: auto !important;
        text-align: center; /* Opzionale: centra il testo su mobile */
    }

    .carosello-pro-homepage .sppb-carousel-pro-text {
        margin-bottom: 30px; /* Spazio tra testo e immagine su mobile */
    }
}
0