2

このバナーは中央に配置されていますが、左側に余白が必要です。ウィンドウのサイズを変更した後にインデントして、低解像度や電話で見やすくしたい.

<div id="banner">
   <center>
      <a target="banner" href="index.html" >
        <img src="images/banner.jpg" border="0" alt="GamerZone Banner">
      </a>
   </center>
</div>

html センターの代わりに css も使用したいと思います。ありがとう。1 週間前に HTML の学習を始めたばかりだったので、実際にどうすればよいかわかりませんでした。何を試すべきか教えていただけますか？

4

4 に答える 4

4

代わりに、コンテナにパディングを追加できます。

#banner{
     padding:0 20px;
}
#banner img{
     display:block;
     margin:0 auto;
}
于 2013-03-06T13:56:40.943 に答える
1

このスタイルを指定するだけで、必要なものを実現できます。

div#banner
{
  margin:0 auto;
  height: 100px;    //your own height
  width: 100px;    //your own width
}

これにより、画面の解像度に関係なく、div が常に中央に表示されます。ここを参照してください。

于 2013-03-06T13:53:36.697 に答える
1

CSS:

#banner{
    width: 500px;
    height: 300px;
    margin:auto;
    text-align:center; /*centers horizontally*/
    line-height:300px; /*same as height and for centering vertically*/
}

<div id="banner">
 <a target="banner" href="index.html" title="some">
  <img src="images/banner.jpg" border="0" alt="GamerZone Banner">
 </a>
</div>

これがうまくいくことを願っています。このjsfiddleをチェックしてください：http://jsfiddle.net/ACuKe/1/

于 2013-03-06T13:49:51.317 に答える
0 
<div id="banner" style="text-align:center; margin:0 auto;">
<a target="banner" href="index.html" style="display:block; text-indent:30px;"><img src="images/banner.jpg" border="0" alt="GamerZone Banner"></a></div>

要素の margin プロパティを "0 auto" ("margin-top:0; margin-right:auto; margin:bottom:0; margin-left:auto;" の短縮形) に加えて "text-align:center" として設定します。 .

次に、要素に固定の「テキストインデント」(単一行コンテンツの場合) または固定の「左マージン」を指定できます。

于 2013-03-06T14:12:00.807 に答える