ヘッダーの中央の画像

私は今、基礎フレームワークでプログラミングしています。しかし、私はなぜ、黄色いメニューバーの画像が整列したままになっているのか理解できません。私は写真を中心にしたいと思います。私はドキュメントのすべてを試しましたが、それは私のために働いていません。誰か他の提案はありますか？あなたのサイトの例を見てみるとヘッダーの中央の画像

My Site Example

<body> 
    <table class="body"> 
    <tr> 
     <td class="center" align="center" valign="top"> 
     <center> 

      <table class="row" style="background-color:yellow;"> 
      <tr> 
      <td class="center" align="center"> 
      <center> 
       <table class="container"> 
       <tr> 
        <td class="wrapper last"> 
        <table class="twelve columns"> 
         <tr> 
         <td> 
          <img width="250" height="80" src="http://placehold.it/580x300"> 
         </td> 
         </tr> 
        </table> 
        </td> 
       </tr> 
       </table> 
      </center> 
      </td> 
     </tr> 
     </table> 
     <br> 

     <table class="container"> 
     <tr> 
      <td> 
      <!-- content start --> 
      <table class="row"> 
       <tr> 
       <td class="wrapper last"> 
        <table class="twelve columns"> 
        <tr> 
         <td> 
         <h1>Hi, Elijah Baily</h1> 
         <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p> 
         <img width="580" height="300" src="http://placehold.it/580x300"> 

         </td> 
         <td class="expander"></td> 
        </tr> 
        </table> 
       </td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
     </table> 
     </center> 
    </td> 
    </tr> 
</table>

出典

2017-01-31 Ne Kr

、プロパティtext-align:leftでbody, table.body, h1, h2, h3, h4, h5, h6, p, tdを持っています。あなたのimgクラスからdisplay: block; float: left;を取り除いてください。

text-align:centerを入力すると、フォーム全体に影響しますのでご注意ください。それで別のクラスを作ってください。

出典

2017-01-31 08:09:49 Minksmnm

@Ne Krが動作していません。 'img { ディスプレイを削除する：ブロック; float：left; } '' 'の要素とそれより上の''に' text-align：center'を追加します – Minksmnm

働いています、ありがとう:-) –

、<img>要素は次のスタイルを持っています

img { 
    display: block; 
    float: left; 
}

これらの両方のスタイルが行動を起こしています。まず、display: blockは、イメージ自体がコンテナーの全幅を占めるようにします。次にfloat: leftは画像をそのコンテナの左側に移動します。

これらのスタイルを削除すると、画像が中央に配置されます。

出典

2017-01-31 08:03:52

をコメントありがとうございました。 '/ * img.center { margin：0 auto;}を削除しようとしました。 float：なし; } */'ですが、画像は依然として左揃えです。私はちょうど今質問に与えたアドレスに新しいコードをアップロードするつもりです –

あなたは 'display：block'スタイルも削除する必要があります。新しいコードをアップロードしたときに教えてください –

あなたのhtmlのヘッダ部分から "12列"クラスを削除して、ロゴをラップすると、ロゴは中央に配置されます。 – Rahul

あなたは画像に「topImage」としてクラスを追加して、あなたのCSSファイルに次のCSSを追加する必要があります：あなたのサイトの例では

.topImage { 
    float: none; 
    margin: 0 auto; 
}

出典

2017-01-31 08:09:34

ちょうどそれを試みた、それは何もしません –

Rahulの答えが働くはずです。 '12列'クラスを削除し、 'コンテナ'クラスを追加しないでください。 –

このcssから幅の部分を削除します。

table.container { 
    /*width: 580px;*/ 
    margin: 0 auto; 
    text-align: inherit; 
}

出典

2017-01-31 08:14:32 Rahul

何もしません： -/http://vouzalis.com/template -test.html –

が答えを更新しました。今はうまくいくはずです。 – Rahul

答えて

関連する問題