IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Element centré verticalement et horizontalement dans une div


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    JAVA/J2EE Oracle MySQL PostrgreSQL
    Inscrit en
    Septembre 2010
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : JAVA/J2EE Oracle MySQL PostrgreSQL
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2010
    Messages : 21
    Points : 14
    Points
    14
    Par défaut Element centré verticalement et horizontalement dans une div
    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

  2. #2
    Membre à l'essai
    Homme Profil pro
    JAVA/J2EE Oracle MySQL PostrgreSQL
    Inscrit en
    Septembre 2010
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : JAVA/J2EE Oracle MySQL PostrgreSQL
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2010
    Messages : 21
    Points : 14
    Points
    14
    Par défaut
    Bonjour

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

    Merci d'avance

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 644
    Points : 66 671
    Points
    66 671
    Billets dans le blog
    1
    Par défaut
    margin auto et l'element se centra tout seul ...

  4. #4
    Membre à l'essai
    Homme Profil pro
    JAVA/J2EE Oracle MySQL PostrgreSQL
    Inscrit en
    Septembre 2010
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : JAVA/J2EE Oracle MySQL PostrgreSQL
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2010
    Messages : 21
    Points : 14
    Points
    14
    Par défaut
    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

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 644
    Points : 66 671
    Points
    66 671
    Billets dans le blog
    1
    Par défaut
    sur l'élément à centrer

  6. #6
    Membre expérimenté Avatar de Willpower
    Homme Profil pro
    sans emploi
    Inscrit en
    Décembre 2010
    Messages
    1 009
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : sans emploi

    Informations forums :
    Inscription : Décembre 2010
    Messages : 1 009
    Points : 1 519
    Points
    1 519
    Par défaut
    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>

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 644
    Points : 66 671
    Points
    66 671
    Billets dans le blog
    1

Discussions similaires

  1. Problème de centrage verticale dans une div
    Par stefsas dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 13/05/2010, 20h15
  2. Liste d'element dans une div
    Par dragonfly dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 18/01/2010, 11h49
  3. Centrer du texte verticalement dans une div
    Par piotrr dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 23/04/2009, 15h47
  4. Centage verticale et horizontale d'une meme div
    Par fabrice88 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 08/05/2008, 17h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo