1

そのため、content-pic という div で 2 つの画像を水平方向にセンタリングするのに問題がありました。ここで見つかった解決策を試しました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

float:left を削除すると正常に動作します

于 2013-08-21T08:48:07.517 に答える
0

div呼び出された content_pic が表示されないので、divを含む ID#contentを中央に配置したいと思いますimg.content_pic。

親の幅は固定されているため、ラッパーを中央に配置するために使用しているのと同じ手法を使用できます。

#content {
   margin: 0 auto;
}

あなたの編集に基づいて、画像を div 内の中央に配置したいことがわかりました#content。それには幅が設定されてdivいないため、画像をシュリンクラップします。画像を水平方向に正当化する余地がありません。

コンテンツ div の幅をラッパーの幅に設定してからコンテンツを中央に配置するか、ラッパーよりも小さい幅を設定してから、最初に説明した手法を使用する必要があります。

于 2012-12-28T22:24:24.057 に答える