1

所以我在一个名为 content-pic 的 div 中水平居中两个图像时遇到了问题。我已经尝试过如何在 div 中垂直居中图像和在此处如何在 div 中垂直居中图像的解决方案，这些解决方案似乎不适用于我的问题。我的问题是如何在标题下方的 div 内容中通过 css 水平居中图像？我是否有一个我丢失的属性，或者我只是要弄乱填充/边距，直到它们看起来正确？

 html
<body>
   <div id="wrapper">
      <div id="header">
         <div id="mast"><img src="http://i1256.photobucket.com/albums/ii488/terafanb/guildwars2/26.png" height="99" width="774=" /></div>
         <div id="below-mast">
            <!--Start of below mast -->
            <img class="nav" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="297" width="226" border="0" alt="Crusader Army" />
            <img class="Guy" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="297" width="549" border="0" alt="Crusader Army" />
         </div>
         <!--end of below mast -->
      </div>
      <!--end header -->
      <div id="content">
         <!--Start of content -->
         <img class="content-pic" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="252" width="184" border="0" alt="Crusader Army" />
         <img class="content-pic" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="252" width="184" border="0" alt="Crusader Army" />
      </div>
      <!--End of content -->
      <div id="footer">
         <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="whatIs1031.html">What is a 1031 Exchange?</a></li>
            <li><a href="exchangeRequ.html">
               1031 Exchange Requirements</a>
            </li>
            <li><a href="typesOfExchange.html">Types of Exchanges</a></li>
            <li><a href="howToStart.html">How to get Started</a></li>
            <li><a href="whyCLX.html">Why CLX?</a></li>
            <li><a href="resources.html">Resources</a></li>
            <li><a href="fAQs.html">FAQs</a></li>
            <li><a href="fees.html">Fees</a></li>
            <li><a href="contactUs.html">Contact Us</a></li>
         </ul>
      </div>
      <!--end of footer -->
   </div>
   <!--End of Wrapper -->

CSS

body {
  margin: 0;
  padding: 0;
}

#wrapper {
  margin: 0 auto; /* use shorthand */
  width: 774px;
}

#content {
  float: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  background-color: green;
}

ul {
  list-style: none;
  margin: 20px auto;
  width: 600px;
}



dd {
  margin-left: 6em;
}

.nav{float: left;}

.Guy{width:500px;
  margin-left: 30px;
}

.content-pic{}
.we-pay {
  font-size: 13px
}

.note{
  text-align:center;
}


.disclaimer {
  font-size: 13px;
  text-align: center;
  font-weight: bold;
  font-style: italic;
}
.FAQ{
   font-size:14px;
}
.FAQ li{ 
  margin:20px 0px 20px 0px;
}

.Question{
  font-weight:bold;
}


#footer {
  clear:both;
  text-align:center;
  margin-top:300px;/* The margin is so large becuase it is cleared and need to be larger much large than content */
}

#footer li {
  display: inline;
  border-left: 2px solid #000;
  padding: 0 3px 0 3px;
}

#footer li:first-child {
  border: none;
}

#footer a {
  font-family: Helvetica, sans-serif;
  color: #300000;
}

这是我在代码笔上的代码，为您提供方便http://codepen.io/Austin-Davis/full/fJLEn。

4

4 回答 4

2

只需 从div中删除 float: left; 属性。content它将使图像居中。
告诉我这不是你想要的。

于 2012-12-28T22:30:14.607 回答
2

您应该从 #content div 中删除 float:left

#content {
  /*float: left;*/
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  background-color: green;
}
于 2012-12-28T22:31:00.860 回答
1

删除浮动：左，它会正常工作

于 2013-08-21T08:48:07.517 回答
0

我没有看到一个div名为 content_pic 的内容，所以我假设您想将其中包含的divid居中。#contentimg.content_pic

由于其父级具有固定宽度，因此您可以使用与使包装器居中的相同技术：

#content {
   margin: 0 auto;
}

根据您的编辑，我现在了解到您希望将图像居中在 div 内#content。好吧，因为它div没有设定宽度，所以它会收缩你的图像。它没有空间来水平证明您的图像。

您需要将内容 div 的宽度设置为包装器的宽度，然后将其内容居中，或者您必须为其设置一个小于包装器的宽度，然后使用我最初描述的技术。

于 2012-12-28T22:24:24.057 回答