Impossible de centrer div à l'intérieur d'une autre balise div

En difficulté avec celui-ci. Tout semble correct, mais je n'arrive pas à centrer le contenu dans les sections <div id="contacts"> et <div class="contacts2">.Impossible de centrer div à l'intérieur d'une autre balise div

Il me manque quelque chose et je l'ai regardé trop longtemps pour le comprendre. En espérant que quelqu'un ici puisse repérer mon problème.

http://jsfiddle.net/mpAy2/

Voici le code:

<!--Start content wrapper--> 
<div id="content"> 
<div id="contact_wrapper"> 

    <!--**************Glenn and Cathy*****************--> 
    <div id="contacts"> 
     <p class="text6">Administrative Staff</p><br /><br /> 

    <div class="admin_list_img"> 
      <img src="../images/staff_students/glenn.jpg" alt="Image of Dr. Glenn Wilson" /> 
     </div> 
     <div class="admin_list"> 
      <span class="text12b"><a href="http://www.usm.maine.edu/tech/glenn-wilson-0">Dr&#46; Glenn Wilson</a></span> <br/>Associate Professor of Technology&#44; Senior Research Scientist<br/><br/> 
      Office&#58; 178 Science Building <br />Phone&#58; &#40;207&#41;780&#45;8045<br />Email&#58 <a href="mailto:[email protected]"> gwilson&#64;usm&#46;maine&#46;edu</a></div> 

     <div class="admin_list_img"> 
      <img src="../images/staff_students/default3.jpg" alt="image of Cathy Virecci-Fana" /> 
     </div> 
     <div class="admin_list"> 
      <span class="text12b">Cathy Virecci&#45;Fana</span> <br/>Grants&#44; Contracts and Projects Coordinator<br/><br/> 
      Phone&#58; &#40;207&#41;780&#45;4782<br />Email&#58 <a href="mailto:[email protected]">cfana&#64;usm&#46;maine&#46;edu</a></span> 
     </div> 
    </div> 

    <!--**************Clare Congdon and Bruce Macloed*****************--> 
    <div class="contacts2"> 
     <p class="text6">Principle Investigators</p><br /><br /> 

     <div class="pi_list_img"> 
      <img src="../images/staff_students/default3.jpg" alt="default image" /> 
     </div> 
     <div class="pi_list"> 
      <span class="text12b"><a href="http://www.usm.maine.edu/cos/clare-bates-congdon">Dr&#46; Clare Congdon</a></span> <br/>Associate Professor of Computer Science<br /><br/> 
      Office&#58; 228 Science Building <br />Phone&#58; &#40;207&#41;228&#45;8441<br />Email&#58 <a href="mailto:[email protected]">congdon&#64;usm&#46;maine&#46;edu</a></p> 
     </div> 

     <div class="pi_list_img"> 
      <img src="../images/staff_students/default3.jpg" alt="default image" /> 
     </div> 
     <div class="pi_list"> 
      <span class="text12b"><a href="http://www.usm.maine.edu/cos/bruce-macleod">Dr&#46; Bruce MacLeod</a></span> <br/>Associate Professor of Computer Science<br/><br/> 
      Office&#58; 222 Science Building<br />Phone&#58; &#40;207&#41;780&#45;4285<br />Email&#58 <a href="mailto:[email protected]">macleod&#64;usm&#46;maine&#46;edu</a></p> 
     </div> 
    </div> 

    <!--**************David Briggs and Carl Blue *****************--> 
    <div class="contacts2"> 
     <div class="pi_list_img"> 
       <img src="../images/staff_students/default3.jpg" alt="default image" /> 
     </div> 
     <div class="pi_list"> 
      <span class="text12b"><a href="http://www.usm.maine.edu/cos/david-briggs">Dr&#46; David Briggs</a></span> <br/>Associate Professor of Computer Science<br /><br/> 
      Office&#58; 220 Science Building <br />Phone&#58; &#40;207&#41;780&#45;4723<br />Email&#58 <a href="mailto:[email protected]">briggs&#64;usm&#46;maine&#46;edu</a></p> 
     </div> 

     <div class="pi_list_img"> 
      <img src="../images/staff_students/default3.jpg" alt="default image" /> 
     </div> 
     <div class="pi_list"> 
      <span class="text12b"><a href="http://www.usm.maine.edu/tech/carl-blue">Dr&#46; Carl Blue</a></span> <br/>Associate Professor of Computer Science<br/><br/> 
      Office&#58; Room 210 John Mitchell Center<br />Phone&#58; &#40;207&#41;780&#45;5391<br />Email&#58 <a href="mailto:[email protected]">cblue&#64;usm&#46;maine&#46;edu</a></p> 
     </div> 
    </div> 

    <!--**************David Bantz *****************--> 
    <div class="contacts2"> 
     <div class="pi_list_img"> 
       <img src="../images/staff_students/default3.jpg" alt="default image" /> 
     </div> 
     <div class="pi_list"> 
       <span class="text12b"><a href="http://www.usm.maine.edu/cos/david-bantz">Dr&#46; David Bantz</a></span> <br/>Adjunct Professor<br /><br/> 
      Office&#58; 226 Science Building <br />Phone&#58; &#40;207&#41;780&#45;8440<br />Email&#58 <a href="mailto:[email protected]">bantz&#64;usm&#46;maine&#46;edu</a></p> 
     </div> 
    </div> 
</div> 
</div> 
______________________ 

#content{ 
    width:100%; 
    max-width: 1000px; 
    height:100%; 
    padding: 0px; 
    margin-top: 0px; 
    margin-bottom: 5px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align:center; 
    background-color:#fff; 
    border-top: 0px; 
    position:relative; 
    z-index:1px; 
} 

#contact_wrapper{ 
    width: 100%; 
    min-width: 900px; 
    height: 350px; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #333; 
    text-align: center; 
} 

#contacts { 
    height:250px; 
    width:100%; 
    min-width: 870px; 
    font-family: arial,serif,Capitals,serif; 
    font-size: 18px; 
    margin-top: 25px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    text-align: center; 
    top: 70px; 
    background-color: #fff; 
    border-bottom: solid 1px; 
    border-top: solid 1px; 
} 

.text6 { 
    font-size: 18px; 
    font-family:arial,serif,Capitals,serif; 
    font-weight:0; 
    color: #000; 
    text-align: left; 
    margin-bottom: 0px; 
    padding-bottom: 0px; 
} 

.admin_list{ 
    position: relative; 
    text-align:left; 
    font-size: 12px; 
    float: left; 
    width:23%; 
    height:150px; 
    background-color:#fff; 
    padding:0px; 
    margin: 0px 20px 0px 0px; 
    vertical-align: middle; 
} 

.admin_list_img{ 
    position: relative; 
    text-align:center; 
    float: left; 
    background-color:#fff; 
    padding:0px; 
    margin: 0px 20px 0px 20px; 
    vertical-align: middle; 
} 

.contacts2 { 
    height:200px; 
    width:100%; 
    min-width: 870px; 
    font-family: arial,serif,Capitals,serif; 
    font-size: 18px; 
    margin-top: 15px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    text-align: center; 
    top: 70px; 
    background-color: #fff; 
    border-bottom: 0px; 
    border-top: 0px; 
} 

.pi_list{ 
    position: relative; 
    text-align:left; 
    font-size: 12px; 
    float: left; 
    width:23%; 
    height:150px; 
    background-color:#fff; 
    padding:0px; 
    margin: 0px 20px 0px 0px; 
    vertical-align: middle; 
} 

.pi_list_img{ 
    position: relative; 
    text-align:center; 
    float: left; 
    background-color:#fff; 
    padding:0px; 
    margin: 0px 20px 0px 30px; 
    vertical-align: middle; 
}

Source

2012-06-12 Kimberly R

Pouvez-vous ajouter un peu de sauts de ligne ici et là pour rendre le code plus lisible? Actuellement, c'est un gros morceau de texte effrayant. – jakee

Que voulez-vous exactement centré? – LukeP

Oh et JSFiddle: http://jsfiddle.net/mpAy2/ – LukeP

Si vous supprimez float: left et ajoutez display: inline-block-.admin_list, .admin_list_img, .pi_list et .pi_list_img il sera centré. Il semble que vous allez devoir jouer avec les dimensions des contacts au sein de la section administrative.

http://jsfiddle.net/Wexcode/qbAAc/embedded/result/

Source

2012-06-12 18:00:18 Wex

Impossible de centrer div à l'intérieur d'une autre balise div

Répondre

Questions connexes