2
JavaScriptコントロールを使用してCSSギャラリーを構築しています。私はポートレートと風景の両方の画像を使用しています。私はそれらをメインページの中央に揃えることができます<div>
イメージとコントロールを小さなコンテナにグループ化しましたが、両方のタイプのイメージをそのコンテナ内の両方の軸に沿ってセンタリングすることはできません。CSSイメージギャラリー対応のセンターアライメント
以下はjsfiddleでの私の最初の取り組みです。私が見逃しているかもしれない同様の質問へのリダイレクトを含むすべてのアドバイスを見てください。
HTML
<div class="image-wrap">
<div id="pic-gallery">
<div class="gal-butt">
<a onclick="plusDivs(-1)">❮</a>
</div>
<div class="pic_ver">
<a target="_blank" href="images/katie_Holding.gif">
<img class="mySlides" src="images/katie_Holding.gif" border="1" alt="" width="200" height="300">
</a>
</div>
<div class="pic_hor">
<a target="_blank" href="images/Mindees_1.gif">
<img class="mySlides" src="images/Mindees_1.gif" border="1" alt="" width="300" height="200">
</a>
</div>
<div class="pic_hor">
<a target="_blank" href="images/Mindees_2.gif">
<img class="mySlides" src="images/Mindees_2.gif" border="1" alt="" width="300" height="200">
</a>
</div>
<div class="pic_hor">
<a target="_blank" href="images/Mindees_3.gif">
<img class="mySlides" src="images/Mindees_3.gif" border="1" alt="" width="300" height="200">
</a>
</div>
<div class="gal-butt">
<a onclick="plusDivs(-1)">❯</a>
</div>
</div>
</div>
CSS
#pic-gallery {
margin-left: 330px;
width: 400px;
height: 400px;
border: 1px solid black;
align-items: center;
display: flex;
}
.image-wrapper {
margin: auto;
align-items: center;
justify-content: center;
}
.gal-butt {
font-size: 2.5em;
}
#pic-ver {
padding-top: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px;
}
#pic-hor {
padding-top: 100px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 50px;
}
JS
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
https://jsfiddle.net/bb85rqpe/1/
上の優れたリソースは、これはあなたが探しているものはありますか? https://jsfiddle.net/bb85rqpe/2/ –
絶対伝説、私はこれを2時間見てきたとは信じられず、血まみれのマージンの自動車でした! – Acadiandreamer
haha素晴らしい。 fwiw、これはいい記事ですhttps://www.w3.org/Style/Examples/007/center.en.html –