Discussion :

[makao]

Bonjour à tous

Je souhaiterais centrer horizontalement et verticalement un élément DOM mais plus particulièrement une image dans un élément DOM de type div avec javascript.
Il est question d'envelopper mon élément dans une ou plusieurs divisions et que l'image soit centrée par rapport à la division la plus externe.

En effet ce que je connais c'est soit uniquement une taille maximale pour chaque côte de l'image ou alors une largeur max et une hauteur max.
L'élement div le plus externe aura donc une largeur et une hauteur connues qui sont la largeur max et la hauteur max ci-dessus évoquées.

Je cherche une solution compatible avec tous les navigateurs ou à défaut le maximum des navigateurs.
Lors de mes recherches, je suis tombé sur un lien que voici :
http://www.jakpsatweb.cz/css/css-ver...-solution.html

J'ai essayé de l'adapter à javascript sans succès.

voici le code que j'ai écrit:

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
/**
 * Enveloppe l'élément spécifié dans une division dont la taille est obtenu à
 * partir de la taille max ou des tailles max spécifiées.
 * L'élément enveloppé est placé au centre (horizontalement et verticalement) de l'enveloppe.
 * Les cas de figures des paramètres sont les suivants :
 * Cas 1
 * -----
 *    - L'élément à enveloppé
 *    - La taille maximale (côté du carré représentant l'espace de l'enveloppe)
 * Cas 2
 * -----
 *    - L'élément à enveloppé
 *    - La largeur maximale de l'élément (largeur de l'enveloppe)
 *    - La hauteur maximale de l'élément (hauteur de l'enveloppe)
 * Cas 3
 * -----
 *    - L'élément à enveloppé
 *    - La largeur maximale de l'élément (largeur de l'enveloppe)
 *    - La hauteur maximale de l'élément (hauteur de l'enveloppe)
 *    - La propriété overflow de l'enveloppe
 * Par défaut la propriété oveflow de l'enveloppe est à hidden
 */
SereniXUtils.wrapAndCenter=function() {
    if (arguments.length < 2) return;
    var maxWidth;
    var maxHeight;
    var elt = arguments[0];
    var overflow;
    if (arguments.length == 2) {
        maxWidth = arguments[1];
        maxHeight = maxWidth;
        overflow = "hidden";
    }
    else {
        maxWidth = arguments[1];
        maxHeight = arguments[2];
        if (arguments.length>= 4) overflow = arguments[3];
        else overflow="hidden";
    }
    if (typeof elt == 'string') elt = SereniXUtils.getElementById(elt);
    if (elt == null) return null;
    var middle = document.createElement('div');
    middle.appendChild(elt);
    var div = document.createElement('div');
    div.appendChild(middle);
    div.style.width = maxWidth;
    div.style.height = maxHeight;
    div.style.display="table";
    div.style.oveflow=overflow;
    var userAgent = navigator.userAgent.toLowerCase();
    if (userAgent.indexOf("msie")>=0 ||
        userAgent.indexOf("microsoft internet explorer") >=0) {
        middle.position="absolute";
        middle.top="50%";
        middle.textAlign="center";
        middle.style.width = "100%";
        elt.style.position="relative";
        elt.style.top="-50%";
        elt.style.textAlign="left";
    }
    else {
        middle.display="table-cell";
        middle.verticalAlign="middle";
    }
    elt.style.marginLeft = "auto";
    elt.style.marginRight = "auto";
    return div;
}

J'ai besoin de votre aide pour le faire marcher.

Merci d'avance

[makao]

Bonjour

Je reste ouvert même à d'autres solutions à mon problème

Merci d'avance

[SpaceFrog]

margin auto et l'element se centra tout seul ...

[makao]

Merci pour la réponse

Mais je ne comprends pas la réponse.

Sur quel élément dans mon exemple de code il faut mettre margin auto ? div, middle ou element

[SpaceFrog]

sur l'élément à centrer

[Willpower]

sans certitude, essaye un truc comme ça :

Code html :

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

1
2
3
<div id="conteneur" style="display:table-cell;vertical-align:middle;">
  <div id="centre" style="position:relative;margin:auto;">text</div>
</div>

[SpaceFrog]

sinon avec jquery
http://web.enavu.com/snippets/center...ss-or-with-js/