it-swarm.dev

Regola la posizione del testo con CSS

Devo spostare il testo mostrato nel componente diapositiva per centrarlo.

Ecco il sito: http://cmarosac-cp52.webjoomla.es/fav/

La classe è: flex-caption

.flex-caption {
width: 25%;
height: 96%;
padding: 2%; 
margin: 0; 
position: absolute; 
left: 0; 
bottom: 0; 
background: rgba(0,0,0,.3); 
color: #fff; 
text-shadow: 0 -1px 0 rgba(0,0,0,.3); 
font-size: 14px; 
line-height: 20px;
}

Vorrei individuare qual è il percorso del file in cui utilizzo la classe flex-caption.

2

Puoi usare il seguente CSS:

.flex-caption {
    height: auto;
    width: 100%;
    margin-bottom: 0;
    padding: 10px 0;
}

Ciò estenderà la casella della didascalia per l'intera larghezza e la posizionerà nella parte inferiore del cursore.

Devi andare alla riga 252 di:

modules/mod_simple_responsive_slideshow/a tema/flexslider.css

Suppongo che tu abbia usato la tua console del browser per ottenere il CSS per questo elemento, quindi spero che tu realizzi che la console del browser ti dice anche dove si trova il codice;)

Spero che sia di aiuto

2
Lodder

Non è facile ottenere ciò che chiedi nell'immagine, a causa del (scarso) modo in cui il cursore visualizza il suo codice.

enter image description here

Ma ecco un suggerimento su come centrare il testo verticalmente:

 /* Add left padding to go clear of arrow */
 p.flex-caption {padding-left: 50px;}

 /* Add empty box above */
 p.flex-caption:before {
  content: " ";
  display: block;
  height: 35%;
}

Questo non centrerà esattamente il testo, ma chiuderà.

0
johanpw