Centrer une image dans une DIV

Version imprimable

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:

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

Le CSS :

Code:

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 :)

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

sinon
Code:

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; }

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:

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";
		}
	}
}

15/03/2018, 09h55
VirgApps

Bonjour,
et en utilisant les flexbox ? https://css-tricks.com/snippets/css/a-guide-to-flexbox/
15/03/2018, 10h10
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.
15/03/2018, 12h58
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 :weird: Tout se fait-il dans l'ordre dans le web ? Ce sont mes premiers devs.
15/03/2018, 13h23
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 ?

Bonjour,

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

Code:

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:

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;
}

15/03/2018, 14h02
JefReb

1 pièce(s) jointe(s)

Citation:

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).
Pièce jointe 360686
15/03/2018, 16h59
psychadelic

Citation:

Envoyé par jreaux62

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 (?)

Citation:

Envoyé par kopbuc

Le HTML, j'utilise HBS avec nodejs
15/03/2018, 19h07
NoSmoking

Bonjour,

Citation:

Envoyé par psychadelic

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 !
15/03/2018, 21h08
kopbuc

Citation:

Envoyé par 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 ?

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

Citation:

Envoyé par jreaux62

Bonjour,

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

Citation:

Envoyé par JefReb

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

Super ça marche :P