html - 不能在其他 div 标签中居中 div

Question

正在为这个而苦苦挣扎。一切似乎都很好，但我无法让内容在 <div id="contacts"> 中居中和 <div class="contacts2">部分。

我错过了一些东西，盯着它看的时间太长了，以至于没能找到它。希望这里有人能发现我的问题。

---

http://jsfiddle.net/mpAy2/

代码如下:

<!--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;
}

Answer 1

如果您删除 float: left 并将 display: inline-block 添加到 .admin_list, .admin_list_img , .pi_list, 和 .pi_list_img 它将居中。看起来您将不得不在管理部分中处理联系人的维度。

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