No se puede centrar div dentro de otra etiqueta div

Luchando con este. Todo parece estar bien, pero no puedo centrar el contenido en el <div id="contacts"> y <div class="contacts2"> .

Me estoy perdiendo algo y lo he mirado demasiado tiempo para darse cuenta. Esperando que alguien aquí pueda detectar mi problema.


http://jsfiddle.net/mpAy2/

Aquí está el código:

<!--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:gwilson@usm.maine.edu"> 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:gwilson@usm.maine.edu">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:gwilson@usm.maine.edu">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:gwilson@usm.maine.edu">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:briggs@usm.maine.edu">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:cblue@usm.maine.edu">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:bantz@usm.maine.edu">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;
}

preguntado el 12 de junio de 12 a las 18:06

¿Puede agregar algunos saltos de línea aquí y allá para que el código sea más legible? Actualmente es un gran trozo de texto aterrador. -

¿Qué es exactamente lo que quieres centrado? -

Ah y JSFiddle: jsfiddle.net/mpAy2 -

Estoy tratando de centrar la sección "Contactos" y "contactos2" dentro de "contact_wrapper". Está alineado a la izquierda en este momento. -

1 Respuestas

Si quitas float: left y añade display: inline-block a .admin_list, .admin_list_img, .pi_listy .pi_list_img estará centrado. Parece que vas a tener que jugar con las dimensiones de los contactos dentro de la Sección Administrativa.

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

Respondido el 12 de junio de 12 a las 19:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.