Discussion :

[comode]

Bonjour,

A en juger par ce que je trouve sur les différents forum/blog/tuto, il semble admis que la propriété CSS vertical-align est censé fonctionner sur une div ayant également la propriété display:inline-block.

Or, si j'écris :

Code :

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

1
2
3
4
5
6
7
8
9
10
.test {
			display:inline-block;
			vertical-align:middle;
			border:1px solid #000;
			width:100px;
			height:100px;
			text-align:center;
			color:#000;
			font-weight:bold;
}

puis dans le HTML

Code html :

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

<div class="test">pouet</div>

le texte reste invariablement en haut, quelque soit le navigateur (FF ou chrome).

Je ne comprends pas pourquoi...

Je précise ne pas vouloir (pouvoir) utiliser autre chose que le inline-block (pas de table-cell ou de flex) et aimerai autant que possible éviter les bricolages, le nombre de ligne et la taille du texte étant variables dans la div.

En vous remerciant.

[NoSmoking]

Bonjour,

Je précise ne pas vouloir (pouvoir) utiliser autre chose que le inline-block (pas de table-cell ou de flex)

on peut toujours réussir à planter un clou avec un tournevis, mais c'est avec un marteau que l'on y arrive le mieux ^(*).

^(*) vieux, très, proverbe d'un charpentier.

[comode]

C'est pour ça que je déteste les forums...

[NoSmoking]

Tu détestes les forums pourquoi ?
- parce que tu n'aimes pas les citations ?
- parce que on ne te dis pas ce que tu voudrais entendre ?
- parce que tu n'arrives pas à tirer enseignement de ce que tu lis ?
- parce que ...

Revenons à notre mouton !
• Un élément en inline n'occupe que la place nécessaire à son contenu, le passer en inline-bloc permet de le dimensionner.
• Pour un élément inline, le centrage vertical est associé à line-height et est donc non applicable à ce que tu cherches à faire puisque tu peux avoir plusieurs lignes suivant la taille du texte.

1st soluce :
On peut donner l'impression d'un centrage vertical en ajoutant un padding, mais il ne faut pas avoir de hauteur fixée pour l'élément ce qui est ton cas.

2nd soluce :
Il te faut donc avoir recours à un conteneur et un contenu, mais c'est déjà peut être du bricolage pour toi !.

Code html :

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

1
2
3
<div class="test">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nisl nisl, facilisis ut ex varius, dignissim placerat magna.</p>
</div>

Il faut fixer une hauteur et/ou une line-height de même valeur pour que l'effet soit visible, avec le CSS suivant pour exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.test {
  height:8em;       /* a convenir */
  line-height:8em;  /* même que la hauteur */
  width:50%;
  background:#cde;  
}
.test p{
  display:inline-block;
  vertical-align:middle;
  margin:0;
  line-height:normal;
}

L'inconvénient majeur est que dans ce cas si tu redimensionnes l'écran il peut y avoir débordement du fait que la hauteur est fixée.

Cette solution n'est donc pas franchement acceptable si tu ne connais pas par avance la taille du texte.

x^iéme soluce :
On pourrait continuer les exemples avec des structures différentes, plus ou moins "bancales", mais le plus simple dans ton cas de figure, et parfaitement reconnu depuis IE8 reste le...display:table-cell.

Je suis navré de cette conclusion, mais les intégrateurs l'on tellement attendu que maintenant qu'il l'on il ne la lâche plus quand elle leur simplifie la tâche

Plus d'infos sur http://www.w3.org/TR/CSS2/visudet.ht...vertical-align