4

私のサイトの1つで、ユーザーが画像間を簡単に移動できるように、「前へ」と「次へ」のテキストリンクが各画像の前後に垂直方向に中央揃えで配置されたシンプルな画像ギャラリーを表示したいと思います。

どうやってやるの？何をしようとしても、うまく動かせません。

4

4 に答える 4

4

簡単なテクニックは次のとおりです。

HTML

<div>
    ​&lt;span>before</span>
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <span>after</span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

div span,
div img {
    display: inline-block;
    vertical-align: middle;
}​

http://jsfiddle.net/mGpz6/

これは、要素のvertical-align値を制御できるため機能します。inline-block通常の要素に対してはそれを行うことはできませんinline。それらは常に（テキスト）ベースラインに揃えられます。これはおそらくWebサイトで経験していることです。

于 2012-09-23T21:49:59.327 に答える
3

簡単なソリューションの何が問題になっていますか？

<div class="myGallery">
    ​&lt;span>before</span>
    <img src="http://www.spiraluniverse.com/uploads/tx_templavoila/image1.jpg">
    <span>after</span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

.myGallery img {
    vertical-align: middle;
}​

結果は次のとおりです。http： //jsfiddle.net/6e87c/embedded/result/

于 2012-09-23T22:45:41.213 に答える
0

next / prevリンクのようなものを使用できます（たとえば、.nextおよび.prevのクラスがある場合）。

.gallery-container {
  position: relative;
}
.next { right: 0; }
.prev { left: 0; }
.next, .prev {
  position: absolute;
  top: 45%;
}

要素.nextおよび.prevは、それらの親（.gallery-container）に対して絶対的に配置され、それらの位置で最高値（50未満の％、要素の高さが10％の場合は％）によってオフセットされます。トップになる：45％、高さが20％の場合、トップ：40％など）。

.next / .prev要素の幅により正確に一致するように、左右のプロパティなど、いくつかの値をわずかに調整する必要があります。.prevの幅が40ピクセルの場合、左：-40px; 必要なものです。

このソリューションは非常にカスタマイズ可能で、ほとんどすべてのブラウザでサポートされています。

HTMLの例：

<div class="gallery-container">
  <a class="prev" href="#">Prev</a>
  <img src="..." />
  <a class="next" href="#">Next</a>
</div>
于 2012-09-23T21:50:28.653 に答える
0

vertical-alignプロパティはブロックレベルの要素には適用できないことに注意してください。

このシナリオでは、ギャラリーコンテナを基準にした絶対配置を使用できます。その後、余白を使用してボタンの位置を調整します。これにより、コンテナdivが垂直方向に引き伸ばされた場合でも、ボタンは所定の位置に留まります（たとえば、より高い画像に対応するため）

.gallery {/*our container element*/
  position:relative;
}
.btn-prev, .btn-next {
  width:40px;height:40px;/*we know the buttons will never change size dynamically*/
  margin:-20px 0;/*so we can use explicit px value to shift them as needed*/
  position:absolute;
  top:50%;
}
.btn-prev {/*remember to correctly position the buttons horizontally*/
  left:0;
}
.btn-next {
  right:0;
}

いじる

于 2012-09-23T22:45:07.280 に答える