0

画面の下部近くに配置する必要がある画像があります。背景画像であるメイン画像があり、ブラウザのサイズに合わせてサイズが変更されます。画面のサイズに関係なく、または画面のサイズが変更された場合でも、背景画像の上の画像を下から20〜30pxにする必要があります。(画像も中央に配置する必要があります。)

これを行う方法がわかりません。これを行う最善の方法は何ですか？

これが私が試したコードです：

.bottom{
  position:absolute;
  margin-left: -355px; /* Image is 710 in width */
  left:50%;
  bottom:-20px;
 }

そのコードでは、画像がページの中央に適切に配置されていますが、下から 20 ピクセルではありません。また、画像の下にコンテンツがあり、コンテンツを画像の下にとどめたいのですが、現在は画像の上に表示されます。

HTML:

 <img class="bottom" src="src-path.png" alt="Text" />

 <p style="clear:both;">&nbsp;</p>

 <!-- More Content here that consist of img and p tags. -->
4

3 に答える 3

0

cssプロパティを使用して、画像を下から20〜30ピクセルに配置すると思います

margin-bottom:30px; または20pxの値があなたに合っています。中央に揃えるための使用vertical-align:middleより明確なコードを共有してください。私が正しく答えたことを願っています。

CSS Together は次のように見える必要があります:-

margin-bottom:30px;
vertical-align:middle;
于 2012-07-04T05:59:52.020 に答える
0

これが私が最終的にこれを行った方法です：

CSS:

.image_block    {
  /* Size of image is where the width/height come from */
   width: 710px;
   height: 500px;
}

.image_block a  {
   width: 100%;
   text-align: center;
   position: absolute;
   bottom: 0px;
}

.image_block img    {
   /*Nothing Specified */ 
}

HTML:

<div class="image_block">
   <a href="#"><img src="src.png" alt="Alt Text" /></a>
</div>
于 2012-07-04T16:34:57.937 に答える
0

フッターをページの下部に配置することを宣言する CSS ファイルを使用することをお勧めします。次に、その CSS のクラスと「フッター」の ID を使用して、画像をページに配置します。十分にクリア？

于 2012-07-04T06:00:18.020 に答える