Question

所以我在一个名为content-pic的div中水平居中两个图像时遇到了麻烦。我已经尝试了How to vertically center image inside div和How to vertically center image inside div这里找到的解决方案，但这些解决方案似乎并不适用于我的问题。我的问题是如何通过css在我的div内容下面的水平中心图像？我有一个我失踪的财产，或者我只是想要填充/保证金，直到他们看起来正确？

 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。

Answer 1

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

Answer 2

你应该从#content div

中删除float：left

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

Answer 3

删除float：left，它将正常工作

Answer 4

我没有看到名为content_pic的div，因此我假设您希望将div的{{1}}标识为#content。

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

img.content_pic

根据您的修改，我现在明白您希望将图像置于div #content { margin: 0 auto; }内。好吧，因为#content没有设定的宽度，所以它会收缩包装你的图像。它有足够的空间来横向证明你的图像。

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

麻烦将图像置于div中

4 个答案: