Discussion :

[kopbuc]

Salut,

Voici mon problème : impossible de centrer les images dans mes div http://i.imgur.com/armCnbh.png

Le HTML, j'utilise HBS avec nodejs :

Code html :

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

1
2
3
4
 
	<div class="blockimg w3-hover-shadow" onClick="">
		<img src="image/{{this}}.svg" alt={{this}}/>
	</div>

Le CSS :

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
 
.blockimg {
	display: inline-block;
	vertical-align:middle;
	box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	background-color: white;
	margin: 20px;
        height: 200px;
        width: 200px;
}
 
.blockimg img{
    vertical-align:middle;
    height: auto;
    width: auto;
    max-width: 180px;
    max-height: 180px;
    display: block;
}

Pouvez-vous m'aider ? Merci

[psychadelic]

par JavaScript, calculer les marges en fct de la taille de l'image... ?

sinon

Code css :

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

1
2
3
4
5
6
7
8
.conteneur{
  width: 300px;
  height: 300px;
  border: 1px #aaa solid;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

[kopbuc]

Merci de l'info je savais pas qu'on pouvait modifier le style css avec du js

Pour centrer l'image à la verticale, voila la solution en js

Code javascript :

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

1
2
3
4
5
6
7
8
9
function setImages(){
	var elements = document.getElementsByClassName('blockimg');
	for (var e in elements){
		if(elements[e].firstElementChild !== undefined){
			var top= 100-elements[e].firstElementChild.height/2;
			elements[e].firstElementChild.style['margin-top'] = top+"px";
		}
	}
}

[VirgApps]

Bonjour,
et en utilisant les flexbox ? https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[kopbuc]

C'est aussi une solution après le problème venait du fait que les images ont des tailles différentes du coup je peux pas mettre une valeur générique pour la margin-top.

[kopbuc]

Par contre je viens de voir que je suis obligé de mettre un setTimeout sinon ça marche pas une fois sur deux sur chrome mais c'est ok sur firefox

setTimeout(setImages, 10);

Pourtant, je lance bien le script après avoir affiché toutes les images, vous auriez une idée Tout se fait-il dans l'ordre dans le web ? Ce sont mes premiers devs.

[psychadelic]

si tu lance ton script alors que les mages ne sont pas finies d'être chargées, alors ça ne marchera pas.

Et a tu essayé mon script css pour centrer les images ?

[Invité]

Bonjour,

AUCUN besoin de JavaScript, ni de calcul de marges avec les flexbox :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="blockimg-wrap">
 
  <div class="blockimg w3-hover-shadow">
    <img src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg" />
  </div>
  <div class="blockimg w3-hover-shadow">
    <img src="https://www.samcodes.co.uk/project/geometrize-haxe-web/assets/images/xseagull.jpg.pagespeed.ic.iK66EGA15-.jpg" />
  </div>
  <div class="blockimg w3-hover-shadow">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1Uqe4mNPOYHynDqtTKWRHCQ4c_9J3jVwZmh3VtqiZ-8zh9bvRnQ" />
  </div>
 
</div>

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
.blockimg-wrap {
    display:-webkit-flex; -webkit-flex-wrap:wrap;
    display:flex; flex-wrap:wrap; /* pour aligner les boites */
}
 
.blockimg {
  display:-webkit-flex; -webkit-justify-content:center; -webkit-align-items:center;
  display:flex; justify-content:center; align-items:center; /* pour centrer les images */
  height: 200px;
  width: 200px;
  box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
  background-color: white;
  margin:5px;
}
 
.blockimg img {
  max-width: 180px;
  max-height: 180px;
}

[JefReb]

C'est aussi une solution après le problème venait du fait que les images ont des tailles différentes du coup je peux pas mettre une valeur générique pour la margin-top

Pourtant avec flex on peut parfaitement aligner verticalement et horizontalement indépendamment des tailles (voir align-items et justify_content).

[psychadelic]

AUCUN besoin de JavaScript, ni de calcul de marges avec les flexbox

Perso je doute que le modèle flexbox soit intégré dans le webkit (?)

Le HTML, j'utilise HBS avec nodejs

[NoSmoking]

Bonjour,

Perso je doute que le modèle flexbox soit intégré dans le webkit (?)

Le moteur de rendu Webkit a fait partie des premiers à mettre en oeuvre les FlexBox qui à l'époque, avant de devenir ce que l'on sait, s'intitulait display: box !

[kopbuc]

si tu lance ton script alors que les mages ne sont pas finies d'être chargées, alors ça ne marchera pas.

Et a tu essayé mon script css pour centrer les images ?

Oui j'ai fait un mix entre ta solution et du code JS étant donné que le CSS ne centrait qu'à l'horizontale.

Bonjour,

AUCUN besoin de JavaScript, ni de calcul de marges avec les flexbox :

Pourtant avec flex on peut parfaitement aligner verticalement et horizontalement indépendamment des tailles (voir align-items et justify_content).

Super ça marche