Bonjour à tous,

J'essaie désespérément de trouver une solution pour centrer un texte, je vous explique :

J'ai un fichier .php qui sert à afficher les effets "hover" quand on survole une image. Dans ce fichier j'ai ajouté une fonction qui affiche le titre au survol de l'image : <?php the_title(); ?>

J'essaie maintenant de center ce fameux titre dans toutes les images qui n'ont pas toutes les mêmes tailles. Etant novice dans ces domaines, je ne trouve pas de solution. Vous allez surement trouver ma solution assez crade mais je suis certain que des bonnes pistes me seront données ici.

Je vous remercie d'avance

----------------------------------------------------------------------------------------------

Je ne peux malheureusement vous joindre qu'un screenshot : http://img11.hostingpics.net/pics/347666testhovertitle.png

Voici la partie qui nous intéresse : 

<?php if(!is_single() ) { ?>
		
		<div class="entry_hover">
		<center><div style="color: #FBF8EF; padding:10px;margin-top:40%;width:200px;border:2px solid #fff;display:inline-block;vertical-align:middle;
text-align:left;}"><font size="5"><?php the_title(); ?></font></div></center>

-
Edité par Anonyme 29 octobre 2014 à 14:05:21

Salut,

Bon déja deux remarques:

• 1- Tu utilises la balise <center> dépreciée depuis quelques années déja, tu peux remplacer ca par un: margin: 0 auto; .
• 2- Tu utilises un vertical-align: middle; sans renseigner de line-height.

Je vais quand même essayer de me pencher sur ton problème je reviens vers toi le plus vite possible

EDIT

De plus la balise font ne te sert strctement à rien, et autant inserer font-size: dans ton "style=".." ".

-
Edité par Anonyme 29 octobre 2014 à 14:25:21

Salut et merci pour ta réponse !

Comme je l'ai dis précédemment, je n'ai pas un bon niveau en code.

Concernant le "margin: 0 auto; -> Je n'ai pas bien compris où le mettre. 

On en arrive donc à cela : 

<div style="font-size: 20px; color: #FBF8EF; padding:10px;margin-top:40%;width:200px;border:2px solid #fff;display:inline-block;line-height: 150%;vertical-align:middle;text-align:left;}"><?php the_title(); ?></div>

En fait le margin: 0 auto; veut dire ceci:

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

Cela permet de centrer horizontalement un contenu et dynamiquement !

Il te suffit de remplacer ton margin-top: 40%; (d'ailleur à quoi sert-il réellement ??) par margin: 0 auto;

Normalement ton <div> sera centré horizontalement.

Maintenant pour le centrage vertical, je ne sais pas si avec le line-height: 150% que tu as mis, cela marche mais ca me parait un peu trop (150%) après je peux me tromper, tiens moi au courant ..

J'ai essayé et le  margin: 0 auto; ne change absolument rien, je l'ai placé dans le div style... J'ai essayé en enlevant le margin-top et le line-height 150%. 

Je continue à chercher mais visiblement ça va être complexe. 

EDIT : en enlevant - > display:inline-block;line-height: 150%;

Tout est bien centré mais seulement horizontalement. 

<div style=" margin: 0 auto;font-size: 20px; color: #FBF8EF; padding:10px;width:200px;border:2px solid #fff;vertical-align:middle;text-align:left;}"><?php the_title(); ?></div>

http://img11.hostingpics.net/pics/303908Sanstitre.png

-
Edité par Anonyme 29 octobre 2014 à 15:02:44

Re,

A mon avis seul le display: inlnie-block; influais sur le problème.

Pour le centrage vertical, voila un petit lien:

http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html

Bonne lecture

En effet c'est ici que j'ai récupéré les fonctions qui m'intéressait mais il n'y à rien pour centrer un texte dans des images qui n'ont pas la même taille... je continue mes recherches.

Merci pour ton aide.

Pour les intéressés j'ai trouvé la solution ici : http://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

.inner_placer{  
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

 <div class="footer">
      <div class="vertical_placer">
            <div class="inner_placer">
                <svg> some Text here</svg>
            </div>
    </div>
 </div> 

-
Edité par Anonyme 30 octobre 2014 à 14:22:50