Centrer une image verticalement

**romuluslepunk** · 25/05/2015, 15h34

Bonjour,

J'ai un div qui occupe toute ma page et est affiché via javascript.
J'aimerai y centrer une image verticalement dedans.

Voila a quoi ressemble mon html :

Code html :

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

1
2
3
4
<body><div id="photoViewer_layer" onclick="closePhotoDetails();" style="display: table-cell;">
<a href="/photos/cat1/6.jpg" title="Télécharger en grand format" download="6.jpg">
	<img alt="6.jpg" src="/photos/cat1/6.jpg" style="width: 1000px;">
</a></div></body>

Les attributs style sont écrit en dur dans le html et pas via un fichier css car c'est du code javascript qui le modifie
Et voici mon 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
div#photoViewer_layer
	{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.65);
	z-index: 1000;
	top: 0;
	left: 0;
        /* sera change via javascript */
	display: none;
	text-align: center;
  	vertical-align: middle;
	}

Si j'ai bien suivi les exemple sur le net, il faut que le div soit affiche en tant que table-cell pour que vertical-align soit pris en compte.
Hors, c'est le cas donc je comprend pas pourquoi celà ne fonctionne pas.

merci d'avance,

Invité · 25/05/2015, 17h42

Bonjour,

Code html :

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

1
2
3
4
5
6
7
<div id="photoViewer_layer" style="display:table;" onclick="closePhotoDetails();">
  <div id="photoViewer_wrap" style="display:table-cell;" >
    <a href="/photos/cat1/6.jpg" title="Télécharger en grand format" download="6.jpg">
      <img alt="6.jpg" src="/photos/cat1/6.jpg" style="width:100px;">
    </a>
  </div>
</div>

Code css :

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
#photoViewer_layer { 
	position: fixed;
  /*display:table; */
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.65);
	z-index: 1000;
	top: 0;
	left: 0;
    bottom:0;
    right:0;
}
#photoViewer_wrap { 
  /*display:table-cell;*/
  vertical-align: middle;
  text-align: center;
}
#photoViewer_layer, #photoViewer_wrap
{
	display: none; /* sera change via javascript */
}

**romuluslepunk** · 25/05/2015, 17h48

Super merci beaucoup !

Centrer une image verticalement

Centrer un élément en CSS

Discussions similaires

Partager

Partager