Discussion :

[ConceptInterWEB]

Tout d'abord je suis désolé si le tout a déjà été demandé et répondue a quelque part.

J'ai un DIV et dans ce dernier j'ai une image en petit format de 30 pixels de haut par 20 pixels de large et a coté j'ai du texte, qui j'aimerais avoir centre verticalement. Présentement il est tout en haut du div ce qui ne fait pas beau a l’œil.

Pour vous aider, voici le CODE CSS :

Code :

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

1
2
3
4
5
6
7
8
div#table-td {
	float: left;
	height: 32px;
	overflow: hidden;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 10pt;
}

Cet meme div est dans celle-ci

Code :

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

1
2
3
4
5
6
7
div#table {
  	display: block;
	background-color: #FFF;
	margin: 5px 0px;
	padding: 2px 5px 2px 5px;
	text-align: center;
}

Et le code ou j'affiche la ligne est celui-ci

Code HTML :

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

1
2
3
4
5
<div id="table-td" style="width: 20%; text-align: left;">
<img src="images/<?php echo $row_cat['N_SEARCH']; ?>.png" width="20" height="30">
<a href="managelist.php?order=<?php echo $nsearch; ?>"><?php echo $row_cat['FB']; ?></a> 
<?php echo $nbre_ut . '/' . $row_cat['nbre'] . ' (<font color = '.$color. '>' . $pourcentage . '%</font>)'; ?>
</div>

Ce dernier est en PHP mais le HTML une fois sur le site donne ceci car ce code est dans un DO WHILE

Code HTML :

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

1
2
3
4
<div id="table-td" style="width: 20%; text-align: left;">
<img src="images/2000.png" width="20" height="30">
<a href="managelist.php?order=2000">2000's</a> 5/112 (<font color = #000>4.5%</font>)
</div>

Merci pour votre aide.
Sylvain

[wheel]

Ajouter un deuxième DIV a l’intérieure du premier pour contenir l'image et le texte et ajouter display: table; dans div#table-td et après ajouter le style suivant :

Code css :

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

1
2
3
4
 div#table-td div  {
  vertical-align:middle;
  display: table-cell;  
}

[ConceptInterWEB]

On avance mais j'ai encore le même résultat.

Pour être sur que j'ai bien compris, je te donne mon CODE. J'ai ajouté le CSS que tu m'as donné, et mon CODE HTML est rendu ainsi :

Code HTML :

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

1
2
3
4
5
<div id="table-td" style="width: 20%;">
<div><img src="images/<?php echo $row_cat['N_SEARCH']; ?>.png" width="20" height="30">
<a href="managelist.php?order=<?php echo $nsearch; ?>"><?php echo $row_cat['FB']; ?></a> 
<?php echo $nbre_ut . '/' . $row_cat['nbre'] . ' (<font color = '.$color. '>' . $pourcentage . '%</font>)'; ?>
</div></div>

Est-ce bien de cette façon ?

Voici un visuel de ce que ça donne afin de mieux vous aider



Je voudrais que tout l'écriture soit vraiment au centre de mon image de haut en bas.

Sylvain

[mathieu]

vous pouvez faire cela avec une mise en page "flex" par exemple :
https://jsfiddle.net/bg3kvcqs/4/

regardez là pour plus d'informations sur flex :
https://developer.mozilla.org/fr/docs/Web/CSS/flex

[wheel]

Mettez le texte dans un div indépendant ca donne un bon alignement vertical

[ConceptInterWEB]

Quand je place le second DIV pour le texte, il disparait.

Au debut je croyais que il etait blanc sur fond blanc, mais ce n'est pas le cas

C'est vraiment bizarre ce qui se passe en ce moment.

Voici le CODE pour etre certain que je fais correctement :

Code html :

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

1
2
3
4
<div id="table-td" style="width: 20%; text-align: left;">
<img src="images/<?php echo $row_cat['N_SEARCH']; ?>.png" width="20" height="30">
<div><a href="managelist.php?order=<?php echo $nsearch; ?>"><?php echo $row_cat['FB']; ?></a> <?php echo $nbre_ut . '/' . $row_cat['nbre'] . ' (<font color = '.$color. '>' . $pourcentage . '%</font>)'; ?>
</div></div>

Sylvain

[NoSmoking]

Bonjour,
pourquoi ne pas utiliser tout simplement vertical-align sur l'image ?
↪ vertical-align.

Ce qui donne par exemple :

Code html :

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

1
2
3
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/40x60.png/def/069">Texte qui suit...
</div>

Nota :

• Le « style inline » n'est là que pour simplifier la réponse ;
• Pour info les balises <font></font> sont dépréciées depuis pas mal de temps.

[wheel]

Le DIV et le texte sont passés au-dessous de l'image et sorties des limites du principale DIV qui a le overflow à hidden ..

j'ai retiré display: table; du div#table-td que j'ai proposé avant parce qu'il désactive le style overflow désigné dans la même class.

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
27
28
29
30
31
32
<html>
 <style>
 
 div#table-td {
        float: left;
        height: 32px;
        overflow: hidden;
        padding-top: 3px;
        padding-bottom: 3px;
        font-size: 10pt;
} 
 
 
 div#table-td div{
    vertical-align:middle;
    display: table-cell;   
}
div#table {
        display: block;
        background-color: #FFF;
        margin: 5px 0px;
        padding: 2px 5px 2px 5px;
        text-align: center;
}
</style>
 
<div id="table-td" style="width: 20%; text-align: left;">
<div><img src="images/2000.png" width="20" height="30"></div>
<div><a href="managelist.php?order=2000">2000's</a> 5/112 (<font color = #000>4.5%</font>)</div>
</div>
 
</html>

[ConceptInterWEB]

Un gros gros gros MERCI, ça fonctionne. Et aussi MERCI pour les explications sur les changements ça aide a comprendre mieux.

Sylvain

[NoSmoking]

Je ne comprendrais jamais pourquoi on cherche à utiliser des solutions alambiquées

... ça fonctionne.

C'est bien le principal

..les explications sur les changements ça aide a comprendre mieux

tant mieux parce que personnellement je n'ai pas tout saisi, voire rien dans

j'ai retiré display: table; du div#table-td que j'ai proposé avant parce qu'il désactive le style overflow désigné dans la même class.

Si ton soucis était également lié à un retour à la ligne sous l'image la technique annoncée par mathieu, utilisation des « flex-box », est sûrement la mieux adaptée !

[Dave Hiock]

\ô/

j'ai retiré display: table; du div#table-td que j'ai proposé avant parce qu'il désactive le style overflow désigné dans la même class.

pareil pour moi, j'ai du mal à saisir en quoi un display:table annule un overflow, par contre ton float:left modifie ton display qui passe en block.

[wheel]

Le texte que ConceptInterWEB n'a pas pu voir devient visible avec display:table

Quand je place le second DIV pour le texte, il disparait.

Au debut je croyais que il etait blanc sur fond blanc, mais ce n'est pas le cas

[ConceptInterWEB]

Je ne comprendrais jamais pourquoi on cherche à utiliser des solutions alambiquées


C'est bien le principal


tant mieux parce que personnellement je n'ai pas tout saisi, voire rien dans

Si ton soucis était également lié à un retour à la ligne sous l'image la technique annoncée par mathieu, utilisation des « flex-box », est sûrement la mieux adaptée !

J'ai lu sur le WEB j'ai lu a propos de FLEX, et aussitôt que le temps me le permet je voir a adapter le tout avec ce mode. Pour le moment je ne voulais pas repartir de zéro.

[Declique69]

La solution avec float pose toujours des problèmes d'alignement.
Depuis pas mal de temps il y a des solution plus simples, comme le flex.
Quelqu'un en a déjà parlé, mais on peut faire encore plus simple en modifiant les styles de #table-td

Code :

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

1
2
3
4
5
 
div#table-td {
   display:flex; 
   align-items:center;
}

Voir align-items (alignement vertical dans un flex)