2

カルーセルに表示されているように、右または左にスライドする矢印があります。

http://twitter.github.com/bootstrap/javascript.html#carousel

キャプションは使用しません。したがって、垂直方向の中央に配置する必要があります。今はこんな感じです

ここに画像の説明を入力してください

その矢印を垂直方向に中央に配置するにはどうすればよいですか？

4

1 に答える 1

4

要素がレイアウトに着地する場所は、信じられないほど多くの要因によって操作できます。マークアップを確認しないと、質問に対する特定の解決策はありません。

ただし、カルーセルの高さが一定に保たれることがわかっている場合は、適切なピクセル数に関係なく、これらの要素の位置を簡単に調整できます。

jQueryを使用すると、要素の位置を見つけて、それに20ピクセルを追加することができます。

オフセットドキュメントを介したjQueryを使用。

// on carousel load or document load
$(".arrows").each(function() {
    // Scoot the icons down from where they are
    var newTop = $(this).offset.top + 30;
    var sameLeft = $(this).offset.left;
    $(this).offset({top:newTop, left:sameLeft });
});

ただし、矢印のCSSで必要な位置を指定することもできます。ただし、これらのアイコンのcssが表示されていない場合は、提案されたものが既にレイアウトされている方法と競合する可能性があるため、どのcssがアイコンの配置に役立つかわかりません。

編集：

twitter.github.comサイトを介して、これらのカルーセルコントロールのcssを確認し、探している効果を実現していると思われる次のcssを調整しました。

.carousel-control {
    position: absolute; /* already here */
    top: 50%;  /* Was top: 40% */
    ...
}

独自のcssファイルでそのcssをオーバーライドする必要があります。独自のクラスを追加して矢印にも追加するか、既存のクラスと同じクラスを使用して!important、必要に応じて使用します。

于 2012-04-30T17:23:44.477 に答える