0

私の問題を画像で示すことから始めます。 ここに画像の説明を入力

スライダーのデザインを作りたいので、次と前のボタンを作りたいです。画像の黄色いものは、display: block とのリンクです。テキスト (これらの矢印は Unicode 文字です) を垂直方向と水平方向に配置するには、どうすればよいですか? 私はまだ黄色全体をリンクとしてクリックできるようにしたいと考えています。cssで黄色いものがどのように見えるかは次のとおりです

    a.prev {
width: 40px;
height: 270px;
display:block;
float:left;
background: yellow;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 55px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 55px;
border-top-left-radius: 5px;
border-bottom-left-radius: 45px;

}

4

2 に答える 2

1

高さが固定されているため、上マージンを使用して矢印を垂直方向の中央に押し下げることができます。

text-align:center矢印を水平方向に中央に配置する必要があります。

line-heightエレメントの と等しく設定して、height垂直方向に中央揃えにします。

于 2012-10-18T19:30:03.983 に答える
1

回答がすでに受け入れられていることは知っていますが、動的な高さで機能する代替手段と方法を提供しているだけです。

矢印が単に a の内側にあるの<a href=#">&larr;</a>か、 span の内側にあるのかはわかりませんでした<a href=#"><span>&larr;</span></a>。それらがスパン内にない場合は、jQuery で追加する必要があります。

静的な幅と高さ: FIDDLE .

// Add span-wrappers around controls
$("a.controls").each(function() {
    $(this.firstChild).wrap("<span></span>");
});

// Position arrows vertically
$("a.controls > span").css("top", function() {
    var thisH = $(this).height(),
        parentH = $(this).parent().height(),
        thisTop = (parentH/2) - (thisH/2);
    return thisTop;
});

現在、動的/流動的なレイアウトを使用している場合、トップ値が 1 回しか計算されないため、これはうまく機能しません。ウィンドウのサイズが変更されるたびに値を再計算する必要があります。ここを見てください。

// Keep aspect ratio of div
function slideHeight() {
    $("#slide-container").height(function() {
        var $this = $(this),
            w = $this.width() / 2.133;
        return w;
    });
}
slideHeight();


// Add span-wrappers around controls
$("a.controls").each(function() {
    $(this.firstChild).wrap("<span></span>");
});


// Position arrows vertically
function arrowPos() {
    $("a.controls > span").css("top", function() {
        var thisH = $(this).height(),
            parentH = $(this).parent().height(),
            thisTop = (parentH / 2) - (thisH / 2);
        return thisTop;
    });
}
arrowPos();


//Execute functions on resize
$(window).resize(function() {
    slideHeight();
    arrowPos();
});​

ほら。:)

于 2012-10-19T09:02:47.260 に答える