Centrer verticalement du texte par rapport à une image dont la hauteur n'est pas connue

**qdaemon_fr** · 03/11/2010, 21h21

Bonjour

Comme tout amour, c'est parfois un peu prise de tête

Soit la page synthétique ci dessous :
http://www.la-voltige.com/test/test.htm

Que dois-je faire pour centrer verticalement le texte par rapport
aux images ?

Merci
Julien

**franculo_caoulene** · 04/11/2010, 14h08

Salut,

Tu les mets dans un même conteneur, puis la FAQ propose deux options.

**qdaemon_fr** · 04/11/2010, 15h46

Merci Franculo,

J'ai bien vu la faq, mais l'exemple présente des cas où la hauteur
du bloc est connue.
Dans mon cas, la hauteur du bloc doit être déterminée par la hauteur
de l'image qui n'est pas connue à l'avance.

Quand j'inspecte avec firebug le bloc de classe "bande", sa hauteur n'est pas
celle de l'image (j'imagine que c'est parce qu'elle est float) mais celle du texte.

Julien

**franculo_caoulene** · 04/11/2010, 16h32

En utilisant vertical-align ça fonctionne sur FF3.6, IE8, Oera10.6, Chrome6 et Safari5 sous Windows.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>alignement vertical image et texte</title>
<style>
  body {margin:0;background:#000;color:#ddd;font:bold 1em Helvetica, Arial, sans-serif;}
  #section {margin:1em auto;width:30em;background:#333;}
  img {vertical-align:middle;}
</style>
<head>
<body>
  <div id="section">
    <img src="images/150x150.jpg" alt="alignement vertical?" />
    blah!
  </section>
</body>
</html>

**anemone-clown** · 04/11/2010, 17h35

Bonjour,

dans ta class pour l'image, essaye de remplacer 'block' par 'inline-block' afin d'obtenir 'display:inline-block;'.

**qdaemon_fr** · 04/11/2010, 20h23

Envoyé par franculo_caoulene

En utilisant vertical-align ça fonctionne sur FF3.6, IE8, Oera10.6, Chrome6 et Safari5 sous Windows.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>alignement vertical image et texte</title>
<style>
  body {margin:0;background:#000;color:#ddd;font:bold 1em Helvetica, Arial, sans-serif;}
  #section {margin:1em auto;width:30em;background:#333;}
  img {vertical-align:middle;}
</style>
<head>
<body>
  <div id="section">
    <img src="images/150x150.jpg" alt="alignement vertical?" />
    blah!
  </section>
</body>
</html>

Bonjour

Effectivement, cela fonctionne si j'écris blah.
Mais si j'écris blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

J'obtiens une ligne centrée sur l'image et tout le reste sous l'image.
Voir le résultat ici

dans ta class pour l'image, essaye de remplacer 'block' par 'inline-block' afin d'obtenir 'display:inline-block;'.

, c'est pareil.

Merci de votre en tout cas.
Julien

**franculo_caoulene** · 05/11/2010, 10h48

Ceci fonctionne avec les mêmes navigateurs que précédemment.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>alignement vertical image et texte</title>
<style>
  body {margin:0;background:#000;color:#ddd;font:bold 1em Helvetica, Arial, sans-serif;}
  #section {margin:1em auto;width:30em;background:#333;}
  img {vertical-align:middle;}
  span {display:inline-block;vertical-align:middle;width:20em;}
</style>
<head>
<body>
  <div id="section">
    <img src="images/150x150.jpg" alt="alignement vertical?" />
    <span>blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! 
    blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! 
    blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah!</span>
  </div>
</body>
</html>

**qdaemon_fr** · 07/11/2010, 09h45

Bonjour

En fait, sur le principe de ce que je veux faire, ni la taille de l'image (hauteur,
largeur) ni la largeur globale n'est connue à l'avance. (la largeur globale
pourrait être un pourcentage de la taille de la fenetre du navigateur).

Plus je lis sur le net, plus j'ai l'impression que ce que je voudrais n'est pas
possible. J'ai fait une adaptation de ta proposition avec du javascript
qui fixe la largeur du span en fonction de la largeur du parent et de celle
de l'image. J'aurai préféré une soluce pure css mais bon...

Merci
Julien

**qdaemon_fr** · 07/11/2010, 10h42

Pour info, voila le code, il reste à éclaircir pourquoi je dois mettre un "-5",
je ne dois pas prendre en compte une marge ou qq chose du genre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>alignement vertical image et texte</title>
<style>
  body {
  margin:0;background:#000;color:#ddd;font:bold 1em Helvetica, Arial, sans-serif;
  }
  #section {
  margin:1em auto;width:50%;background:#333;
  }
  img {
  vertical-align:middle;
  }
  .span {display:inline-block;vertical-align:middle;overflow:hidden;white-space:nowrap;}
  p{margin:0;};
</style>
 
<script  type="text/javascript" >
window.onresize = onResize;
var  registeredSpans = new Array();
 
function registerSpan(spanId, imgId){
  registeredSpans[registeredSpans.length] = new Object();
  registeredSpans[registeredSpans.length-1].span = document.getElementById(spanId);
  registeredSpans[registeredSpans.length-1].img = document.getElementById(imgId);
  resizeSpan(registeredSpans[registeredSpans.length-1]);
}
 
function resizeSpan(spanRecord){
		if (spanRecord.span.style.setAttribute) { // Pour mon ami IE
            spanRecord.span.style.setAttribute ("width", spanRecord.span.parentNode.clientWidth-spanRecord.img.offsetWidth - 5 + "px");
        } 
        else {
			spanRecord.span.style.setProperty ("width", spanRecord.span.parentNode.clientWidth-spanRecord.img.offsetWidth - 5 + "px", null);
        }
}
 
function resizeAllSpans(){
	for (i = 0 ; i < registeredSpans.length ; i++ ){
		resizeSpan(registeredSpans[i]);
	}
}
 
function onResize(){
  resizeAllSpans();
}
 
</script>
<head>
<body>
  <div id="section" >
    <img src="26_190.jpg" id="img1" alt="alignement vertical?"  onload='registerSpan( "span1", "img1");'/>
    <span class="span" id="span1" ><H2>blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! </H2>
<p>    blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! </p>
    blah! blah! blah! blah! bla! blah! blah! blah! blah! blah! blah! blah! 
    blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah! blah!</span>
  </section>
</body>
</html>

**Candygirl** · 07/11/2010, 10h50

Hello, tu peux essayer avec un display:table

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE HTML>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
 
<meta charset="utf-8">
<title>alignement vertical image et texte</title>
<style>
  body {margin:0;background:#000;color:#ddd;font:bold 1em Helvetica, Arial, sans-serif;}
  #section {margin:1em auto;width:30em;background:#333;display:table;}
  span {display:table-cell;vertical-align:middle;}
</style>
 
</head><body>
  <div id="section">
    <span><img src="tst_fichiers/image.jpg" alt="alignement vertical?"></span>
    <span>blah!     blah!    blah!    blah!    blah!    blah!    blah!    
blah!    blah!    blah!    blah!    blah!    blah!    blah!    blah!    
blah!    blah!    blah!    blah!    blah!    blah!    blah!    blah!    
blah!    blah!    blah!    blah!    blah!    blah!    blah!    blah!    
blah!    blah!    blah!    blah!    blah!    blah!    blah!    blah!    
blah!    blah!    blah!    blah!    blah!    blah!    blah!    blah!    
blah!    blah!    blah!    blah!    blah!    blah!    blah!    blah!   
blah!    blah!    blah!    blah!</span>
 
</div></body></html>

Mais ne fonctionnera pas sur IE7 et moins il me semble

**qdaemon_fr** · 07/11/2010, 13h20

Bonjour CandyGirl

Mon besoin visuel est exactement celui-ci. (mais avec du javascript). Il faut
redimensionner la page pour voir le principe.

Si je mets display:table; la division est dimensionnée par son contenu
et je ne sais pas tronquer le texte...

Merci
Julien

**Candygirl** · 07/11/2010, 15h33

Je ne suis pas sûre d'avoir compris

Le but est de faire disparaître un bout du texte pour le rendre illisible ?

Tu obtiens, il me semble, le même effet sur mon code en modifiant le css que je t'ai donné de la manière suivante:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#section {margin:1em auto;width:50%;background:#333;overflow:hidden;}
span {display:table-cell;vertical-align:middle;white-space:nowrap;}

En faite, le display:table n'est apparemment plus indispensable.
Au passage, tu dois utiliser un div plutôt qu'un span si tu comptes mettre des p ou h2 à l'intérieur.

**qdaemon_fr** · 08/11/2010, 19h23

Envoyé par Candygirl

Je ne suis pas sûre d'avoir compris

Le but est de faire disparaître un bout du texte pour le rendre illisible ?

Ben si, t'as compris et comme ça, c'est pafait C'est pour faire un template
sur plateforme mobile. Le titre apparait et ce qui déborde... déborde !
Le pb n'était pas de rendre invisible ce qui dépasse mais de centrer verticalement
sur une image de taille imprévue et sur une largeur de page imprévue également.
Une fois que j'ai pu centrer, j'arrivais plus à faire déborder (: quel looser !

Envoyé par Candygirl

Au passage, tu dois utiliser un div plutôt qu'un span si tu comptes mettre des p ou h2 à l'intérieur.

C'est juste.

Merci de ton aide.
Julien

Centrer verticalement du texte par rapport à une image dont la hauteur n'est pas connue

Centrer un élément en CSS

Discussions similaires

Partager

Partager