0
私はHTMLとCSSで非常に錆びています。私は現在学校のためのプロジェクトに取り組んでいます。私は10枚の写真のすべてのCSSプロパティを作成して、自分のやりたいことをやり遂げました（スクロールすると境界線の色が変わります）。しかし、私の人生のために、私はどのように画像を中心に置くかを理解することができません。 1行に3枚の画像を中央に配置しようとしています。余分な画像が1枚あります。どんな提案も大歓迎です。繰り返しますが、私は本当に錆びているので、簡単な解決策かもしれません。CSSを使用した画像のセンタリング
div.gallery {
margin: 5px;
border: 5px solid white;
float: left;
width: 400px;
}
div.gallery:hover {
border: 5px solid yellow;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
a.ex1:hover,
a.ex1:active {
color: yellow;
}
a.ex2:hover,
a.ex2:active {
color: yellow;
}
a.ex3:hover,
a.ex3:active {
color: yellow;
}
a.ex4:hover,
a.ex4:active {
font-size: 200%;
color: yellow;
}
img {
text-align: center;
}<h1 class="work1">
<center><a class="ex1">Photography Assignment</a></center>
</h1>
<center>
<div class="gallery">
<a target="_blank" href="images/SS1.png">
<img src="images/SS1.png" alt="Margaret's bag" height="200" width="300">
</a>
<div class="desc">An extreme close up of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS2.png">
<img src="images/SS2.png" alt="Margaret's notes" height="200" width="300">
</a>
<div class="desc">A picture of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS3.png">
<img src="images/SS3.png" alt="Close up of Margaret's face" height="200" width="300">
</a>
<div class="desc">A close up of Margaret against a pink house</div>
</div>
<br>
<br>
</center>
<div class="gallery">
<a target="_blank" href="images/SS4.png">
<img src="images/SS4.png" alt="A medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS5.png">
<img src="images/SS5.png" alt="A medium long shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium long shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS6.png">
<img src="images/SS6.png" alt="A long shot of Margaret in motion" height="200" width="300">
</a>
<div class="desc">A long shot of Margaret in motion</div>
</div>
<br>
<div class="gallery">
<a target="_blank" href="images/SS7.png">
<img src="images/SS7.png" alt="A upward medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">An upward medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS8.png">
<img src="images/SS8.png" alt="A telephoto shot of a sunflower with Margaret in the background" height="200" width="300">
</a>
<div class="desc">A telephoto shot of a sunflower with Margaret in the background</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS9.png">
<img src="images/SS9.png" alt="A telephoto shot of Margaret" height="200" width="300">
</a>
<div class="desc">A telephoto shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS10.png">
<img src="images/SS10.png" alt="A wide shot of Margaret getting into a firetruck" height="200" width="300">
</a>
<div class="desc">A wide shot of Margaret</div>
</div>
<br>
<h1>
<center><a class="ex1">Poster Assignment</a></center>
</h1>
可能な複製を使用して、クラス名を使用することができますcssでイメージをセンターする方法]（https://stackoverflow.com/questions/28574787/how-to-center-a-image-in-css） – ochi
こんにちはジャック。簡単なメモ - HTML/JS/CSSの質問に対するStack Overflowについては、あなたがやっていることを実証することがはるかに簡単な組み込みの例を作ることができます。 – dwjohnston
[CSSを水平方向にセンタリングする]の複製が可能です（https://stackoverflow.com/questions/11856150/css-to-center-a-image-horizontally） – Dez