web-dev-qa-db-fra.com

Ajuster la position du texte avec CSS

Je dois déplacer le texte affiché dans le composant diapositive pour le centrer.

Voici le site: http://cmarosac-cp52.webjoomla.es/fav/

La classe est: 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;
}

Je voudrais localiser quel est le chemin du fichier où j'utilise la classe flex-caption.

joomla-3.xfix-my-codecss
2
sistemas sistemas

Vous pouvez utiliser le CSS suivant:

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

Cela étendra la zone de légende à la largeur totale et la positionnera au bas du curseur.

Vous devez aller à la ligne 252 de:

modules/mod_simple_responsive_slideshow/theme/flexslider.css

Je suppose que vous avez utilisé la console de votre navigateur pour obtenir le code CSS de cet élément. J'espère donc que vous vous rendrez compte que la console du navigateur vous indique également où se trouve le code;)

J'espère que cela t'aides

2
Lodder

Il n'est pas facile d'obtenir ce que vous demandez dans votre image, en raison de la façon (médiocre) utilisée par le curseur pour rendre son code.

enter image description here

Mais voici quelques suggestions sur la façon de centrer le texte verticalement:

 /* 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%;
}

Cela ne va pas centrer le texte exactement, mais fermer.

0
johanpw