0

ページの中央に画像を表示しようとしていますが、境界線には異なるパディングとマージンが必要です。画像の幅と高さが異なります。したがって、それに応じてストレッチする必要があります。

これを本文に入れて、すべてのマージンを削除します。

body {
    margin:0px 0px;
    padding: 0px;
    }

次に、これを使用して画像の周りに境界線を配置しました。

#imgcontainer {
    position:relative;
    text-align: center;
    border-color: red;
    border-width: 1px;
    border-style: solid;
    padding: 5px;
}

しかし、境界線はページ全体に広がっています。彼を防ぐ方法はありますか？私が置く場合：

position:relative;

境界線は所定の位置にスナップされますが、画像は中央に配置されなくなります。

#imgcontainer の周りにコンテナ ボックスを配置すると、ページの端にもスナップされます。

位置：相対/絶対の組み合わせで簡単に解決できると思いますか？

これは私が話していることです: http://kareldc.com/dislexicon/1-motion.html

どうも！

4

4 に答える 4

1

こんにちは、@Fabrizo Calderanに従って定義します

このようにcss

#imgcontainer {
display:inline-block;
vertical-align:top; 
}

あなたの結果よりも

ここに画像の説明を入力

于 2012-09-11T08:43:50.123 に答える
0

ボーダー効果を img タグだけに適用できます。

たとえば、

#imgcontainer img { 
      border-color: red;
      border-width: 1px;
      border-style: solid;
     }
于 2012-09-11T08:42:18.737 に答える
0

これがあなたへの答えです：フィドルの例

于 2012-09-11T08:42:36.877 に答える
0

あなたが割り当てることができる問題をよく理解していればdisplay: inline-block、#imgcontainerそれ以外の場合は問題を示すフィドルを投稿してください

于 2012-09-11T08:29:20.407 に答える