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. Glenn Wilson</a></span> <br/>Associate Professor of Technology, Senior Research Scientist<br/><br/>
Office: 178 Science Building <br />Phone: (207)780-8045<br />Email: <a href="mailto:gwilson@usm.maine.edu"> gwilson@usm.maine.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-Fana</span> <br/>Grants, Contracts and Projects Coordinator<br/><br/>
Phone: (207)780-4782<br />Email: <a href="mailto:gwilson@usm.maine.edu">cfana@usm.maine.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. Clare Congdon</a></span> <br/>Associate Professor of Computer Science<br /><br/>
Office: 228 Science Building <br />Phone: (207)228-8441<br />Email: <a href="mailto:gwilson@usm.maine.edu">congdon@usm.maine.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. Bruce MacLeod</a></span> <br/>Associate Professor of Computer Science<br/><br/>
Office: 222 Science Building<br />Phone: (207)780-4285<br />Email: <a href="mailto:gwilson@usm.maine.edu">macleod@usm.maine.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. David Briggs</a></span> <br/>Associate Professor of Computer Science<br /><br/>
Office: 220 Science Building <br />Phone: (207)780-4723<br />Email: <a href="mailto:briggs@usm.maine.edu">briggs@usm.maine.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. Carl Blue</a></span> <br/>Associate Professor of Computer Science<br/><br/>
Office: Room 210 John Mitchell Center<br />Phone: (207)780-5391<br />Email: <a href="mailto:cblue@usm.maine.edu">cblue@usm.maine.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. David Bantz</a></span> <br/>Adjunct Professor<br /><br/>
Office: 226 Science Building <br />Phone: (207)780-8440<br />Email: <a href="mailto:bantz@usm.maine.edu">bantz@usm.maine.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部分放在联系人包装器的中心。它现在是左对齐的。