28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrage vertical droit sans position absolue

Bonjour à tous
J'avais déjà posté 2 messages liés à un positionnement droit d'un texte en utilisant float:right (et on m'a bien aidé à chaque fois, merci aux personnes concernées Smiley cligne ). En voici encore un, mais cette fois je suis contraint à une difficulté supplémentaire : je dois faire un alignement centré verticalement.
Dans l'exemple suivant, le texte de droite, "La Fontaine", doit être centré verticalement dans la boîte grise. La hauteur de ce texte est fixe, c'est la hauteur d'une ligne. Par contre la hauteur de son contenant ne l'est pas. Dans cet exemple, elle fait 2 lignes de haut, mais ça peut être plus.


<html> 
<head> 
<style> 
.boite { } 
 
.gauche { 
    float: left;
    width: 100%; 
    background-color: #b0b0b0; 
}   
 
.droite { 
    float: right; 
} 
 
.clear { 
    clear: both; 
} 
</style> 
</head> 
 
<body> 
<div class="boite"> 
    <span class="gauche">
    	Patience et longueur de temps font plus que force ni que rage<br /> 
    	Patience et longueur de temps font plus que force ni que rage
      <span class="droite">La Fontaine</span> 
    </span> 
    <span class="clear"></span> 
</div> 
</body> 
</html>


J'ai testé avec vertical-align:middle, avec un margin-top en %, un top en %, et je n'arrive à rien. La seule technique que j'ai trouvée sur internet utilise le positionnement absolu, en mettant un top à 50% puis un margin-top négatif. Mais je ne peux pas utiliser de positionnement absolu, car si la fenêtre est peu large, le texte de droite doit passer sous le texte de gauche. En positionnement absolu, il y aurait superposition.

Quelqu'un aurait une idée ?
Modifié par sudrak (06 Jul 2011 - 14:34)
Bonsoir,

comme il s'agit de deux élément de type inline a centré mutuellement, display:inline-block; et vertical-align:midlle(un width) serait tout a fait adapter ... et ça passe dans IE.
Exit les float totalement incompatible avec un centrage vertical dans le flux.

GC
+1 pour la suggestion de gc-nomade.

Rappel qui va bien: toute page HTML doit impérativement avoir un Doctype en bonne et due forme. Y compris une simple page de test. Pour simplifier: 1) en l'absence de Doctype, les navigateurs déconnent et 2) si vous ne savez pas quel Doctype choisir, écrivez <!DOCTYPE html> au tout début de vos fichiers HTML, avant la balise <html>.
Comment ferais-tu?
Rien que pour faire un alignement à droite, sans utiliser de float:right ni de position absolue (il ne reste que text-align:right), je ne vois pas comment faire. Si la largeur de mon texte de droite était constante, ça marcherait. Mais sans spécifier de largeur, la propriété text-align:right ne fait rien.
Je suis tout à fait d'accord pour le doctype, il y en a bien un dans mes pages. Là je vous ai juste envoyé une page vite fait pour illustrer mon problème.
Salut,
sudrak a écrit :
Comment ferais-tu?
Rien que pour faire un alignement à droite, sans utiliser de float:right ni de position absolue (il ne reste que text-align:right), je ne vois pas comment faire. Si la largeur de mon texte de droite était constante, ça marcherait. Mais sans spécifier de largeur, la propriété text-align:right ne fait rien.

Essaie d'appliquer la propriété text-align au niveau de ton div.
Hey, le text-align au niveau de mon div marche bien!
Maintenant, comment centrer le texte de droite verticalement? Si lui lui affecte un vertical-align:middle , ça ne fait rien.
Voici le résultat attendu
upload/38105-alignement.jpg

Sachant qu'il y a la contrainte dont j'ai parlé plus haut : si la fenêtre du navigateur est trop étroite, le texte de droite doit passer sous le texte de gauche, et non se superposer dessus. C'est le cas avec le code ci-dessus, seul le positionnement vertical centré manque.
Alors avec du display:inline-block sur tes deux blocs de contenu (les phrases à gauche, le texte à droite) tu peux obtenir un centrage vertical, mais pour en aligner à un gauche et l'autre à droite ça risque d'être compliqué.

Du coup je partirais plutôt sur du display:table-cell.

Si tu as la structure suivante:
<div class="bigquote">
  <blockquote class="main">
    <p>Patience et longueur de temps...</p>
  </blockquote>
  <div class="cite">
    <p>La Fontaine</p>
  </div>
</div><!--.bigquote-->

Ça peut donner:
.bigquote {
  display: table;
  width: 100%;
}
.bigquote .main {
  display: table-cell;
  width: 90%;
  text-align: left;
  vertical-align: middle;
}
.bigquote .cite {
  display: table-cell;
  width: auto;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

Par contre ça ne va pas revenir à la ligne automatiquement quand la fenêtre du navigateur est trop étroite. Mais tu dois pouvoir gérer ce cas de figure avec des Media Queries.

(Autrement, sans Media Queries, il y a peut-être un truc à jouer avec un conteneur en display:table-cell;vertical-align:middle; + contenu de gauche en float + contenu de droite en display:inline-block, mais ça risque d'être assez casse-gueule.)
Super! La solution des display:table et display:table-cell marche à merveille! Du moins sur Firefox et Safari. IE donne un truc naze, mais je m'en fiche car ce navigateur n'est pas à la cible pour mon projet.
Merci pour l'aide ! Smiley smile
sudrak a écrit :
A partir d'IE7 peut-être

Non, à partir d'IE8.

sudrak a écrit :
mais sur IE6 c'est pas terrible

Appelez les hommes en blanc, on en a trouvé un qui teste encore sous IE6 en 2011! Smiley cligne
Ça se trouve chez lui il a une planque où il séquestre un Netscape Navigator 6 et un IE 5 Mac!
Modifié par fvsch (06 Jul 2011 - 18:48)
Faudra alors que les hommes en blanc franchissent le portail de sécurité en bas de la tour, car c'est au boulot que j'utilise IE6, pas chez moi !
Sujet clos
Aller à