プロが教える店舗&オフィスのセキュリティ対策術

どうか力をお貸しください…。

dreamweaverでホームページを作成しています。

640pxの幅を指定した<div>の background-img に、CSSスプライトの中の幅600pxの画像を配置し、background-positionで、0 -100px; のように場所を指定しました。

その幅600pxの画像を640pxの<div>の中で中央寄せで配置したいのですが、どのようにすればいいでしょうか?

padding:20px;は使うことができません。

ご存知の方がいたらよろしくお願いします。

A 回答 (1件)

 HTMLさえ、ちゃんとしていたら迷うことないと思いますが???


 スプライトを使うということは、背景画像ですから、たとえば、本文(section)内のナビゲーション(nav)の背景に使用するのでしたら、HTMLは
<div class="section">
 <div class="nav">
  <ul>
   <li><a href=""></a></li>
・・・以下省略
でしたら、スタイルシートは
div.section{width:640px;margin:0 auto;}
div.section div nav ul,div.section div nav ul li{display:block;list-stylr:none;margin:0;padding:0;text-align:center;line-height:1.8em;}
div.section div nav ul{width:600px;}
div.section div nav ul li{width:100%;height:1.8em;position:relative;}
div.section div nav ul li+li{margin-top:5px;}
div.section div.nav ul li a{display:block;width:100%;height:100%;background:url() no-repeat 0 -100px;}
div.section div.nav ul li a:hover{background-position:0 -150px;
div.section div nav ul li+li a{background-position:0 -200px;}
とか・・・・
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!