Centrer du contenu dans 3 div différentes

Résolu
grafiste69 Messages postés 20 Statut Membre -  
grafiste69 Messages postés 20 Statut Membre -
Bonjour,

Pouvez m'aider à centrer 3 div dans une div comme l'image ci-dessous svp ?


Merci

4 réponses

  1. astuces72 Messages postés 2146 Date d'inscription   Statut Membre Dernière intervention   1 669
     
    slt

    pour t'aider il faut que tu nous donnes ce que tu as déjà fais, sinon c'est pas de l'aide, c'est te le faire !
    0
  2. grafiste69 Messages postés 20 Statut Membre
     
    Merci pour votre réponse :)

    en fait j'ai 3 div que je veux mettre dans une div qui les englobe comme sur l'image

    <div id=" englobe">

    <div id=" contenu-1"> texte et image centrer </div>
    <div id=" contenu-2"> texte et image centrer </div>
    <div id=" contenu-3"> texte et image centrer </div>
    <div id=" contenu-4"> texte et image centrer </div>

    </div>

    En CSS :
    #englobe{}
    #contenu-1 { je ne sais pas comment faire pour arriver au résultat de l'image }
    #contenu-2{ je ne sais pas comment faire pour arriver au résultat de l'image }
    #contenu-3 { je ne sais pas comment faire pour arriver au résultat de l'image }
    #contenu-4 { je ne sais pas comment faire pour arriver au résultat de l'image }
    0
  3. astuces72 Messages postés 2146 Date d'inscription   Statut Membre Dernière intervention   1 669
     

    <style type="text/css">
    #global {
    width: 600px;
    height:300px;
    }
    #div1 {
    display: inline;
    float: left;
    height: 170px;
    width: 200px;
    background-color: #F0F0F0;
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: #09F;
    }
    #div2 {
    display: inline;
    float: left;
    height: 170px;
    width: 200px;
    background-color:#F0F0F0;
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: #09F;

    }
    #div3 {
    display: inline;
    float: left;
    height: 170px;
    width: 200px;
    background-color:#F0F0F0;

    }
    #div4 {
    display: inline;
    float: left;
    height: 130px;
    width: 200px;
    background-color: #F0F0F0;
    text-align: center;
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: #09F;

    }
    #div5 {
    display: inline;
    float: left;
    height: 130px;
    width: 200px;
    background-color: #F0F0F0;
    text-align: center;
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: #09F;

    }
    #div6 {
    display: inline;
    float: left;
    height: 130px;
    width: 200px;
    background-color: #F0F0F0;
    text-align: center;

    }
    h1 {
    font-size: 14px;
    font-family: "Courier New", Courier, monospace;
    }
    .p12 {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    }

    </style>

    <div id="global">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div class="clearFloat"></div>
    <div id="div4">
    <h1>Un titre</h1>
    <p><span class="p12">Une petite description centré</span><br />
    </p>
    </div>
    <div id="div5">
    <h1>Un titre</h1>
    <p class="p12">Une petite
    description centré</p>
    </div>
    <div id="div6">
    <h1>Un titre</h1>
    <p class="p12">Une petite description centré</p>
    </div>
    <div class="clearFloat"></div>
    </div>

    0
  4. grafiste69 Messages postés 20 Statut Membre
     
    ça marche, merci beaucoup astuce72 :)
    0