4

cssで写真のスタイルを設定することを学んでいます。写真を中央に配置しましたが、元のサイズを半分にしてサイズを変更すると、左右の境界線が画像を囲みません。境界線の上下は正しいです。

同様の問題に対するチュートリアルや回答は見つかりませんでした。この問題の解決についてご意見をお寄せいただければ幸いです。

.img {
         text-align:center;
         margin-top:80px;
         margin-bottom:0px;
         padding:0px;
         border:4px solid #F2F2F2;
         }

サンプル Web サイトはhttp://nspowers.orgにあります。使用されている完全なスタイルシートへのリンクはhttp://nspowers.org/stylesheet/stylesimgquestion.cssで、画像のプロパティは一番下にあります。

ありがとうございました

4

2 に答える 2

2

内部に画像があるコンテナー div ではなく、画像自体をスタイリングしていません。クラスを.img持つ要素を対象とする CSS のセレクターを(ドットがないことに注意してください) に変更すると、すべての画像が対象になります。 imgimg

または、より具体的にしたい場合img.myClassは、クラスを持つすべての画像を対象とする which を呼び出して、特定のクラスを持つすべての画像に追加できますmyClass。

.imgただし、混乱を招く可能性があるため、クラス名として使用しないことをお勧めします。

アップデート

以下は、他のクラスや要素の乱雑さを除いた完全なコード例です。このフィドルでライブデモを見ることができます

HTML

<div class='centered'>
<img src='http://nspowers.org/excomm_photo.jpg' height="251" width="380"/>
</div>​

CSS

.centered{
    text-align:center;
}

.centered img{
    border:5px solid blue;
}​
于 2012-12-15T03:10:05.733 に答える
0

画像自体ではなく、画像を囲む div に境界線を追加しました。これが問題です。

修正する1つの方法は、これを追加することです：

.img {
     text-align:center;
     margin-top:80px;
     margin-bottom:0px;
     padding:0px;
 }

 .img > img{border:4px solid #F2F2F2;}
于 2012-12-15T03:09:13.643 に答える