Html 无法将div居中放置在其他div标记内

Html 无法将div居中放置在其他div标记内,html,css,Html,Css,与此抗争。看起来一切正常,但我无法将内容集中在和部分中 我错过了一些东西,我盯着它看了太长时间,以至于没能发现它。希望这里有人能发现我的问题 代码如下: <!--Start content wrapper--> <div id="content"> <div id="contact_wrapper"> <!--**************Glenn and Cathy*****************--> <div

与此抗争。看起来一切正常,但我无法将内容集中在和部分中

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

代码如下:

<!--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;
}
如果删除float:left并将display:inline块添加到.admin_list、.admin_list_img、.pi_list和.pi_list_img中,它将居中。看起来您必须在管理部分中处理联系人的维度

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


您能在这里和那里添加一些换行符以使代码更具可读性吗?目前,这是一大块吓人的文本。你到底想以什么为中心?噢,还有JSFIDLE:我正在尝试将联系人和联系人2部分放在联系人包装器的中心。它现在是左对齐的。你能在这里和那里添加一些换行符以使代码更可读吗?目前,这是一大块吓人的文本。你到底想以什么为中心?噢,还有JSFIDLE:我正在尝试将联系人和联系人2部分放在联系人包装器的中心。它现在是左对齐的。