CODEWITHSUNDEEP
jquerycsstwitterxhtmltwitter-bootstrap
SNaRe
SNaRe

Reputation: 2067

How to Vertically align Twitter Bootstrap Carousel's Arrow?

As you see on the carousel there is an arrow to slide to either right or left.

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

I don't use captions. Therefore, I want it to be vertically centered. Now it is like this

enter image description here

How can I vertically center that arrows?

Upvotes: 2

Views: 8730

Answers (1)

veeTrain
veeTrain

Reputation: 2915

Where elements end up landing in your layout can be manipulated by an incredible number of factors. Without seeing your mark-up a specific solution to your question isn't possible.

However, if you know that the height of your carousel is going to remain constant than you could fairly easily just adjust the positioning of those elements down however many pixels it suits you.

Using jQuery, you could find the element's position and then just add 20 pixels to it.

With jQuery via offset documentation.

// 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 });
});

However, you could also just specify the position that you want in the arrow's CSS. Without seeing the css for those icons already, though, I'm not sure what css would help you arrange them because whatever might be suggested could conflict with how you are already laying them out.

Edit:

Via the twitter.github.com site, I looked at the css for those carousel-control and adjusted the following css which seemed to achieve the affect you were looking for:

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

You should override that css in your own css file. Add your own class and add it onto the arrows as well or just use the same class it already has and use !important if necessary.

Upvotes: 4

Related Questions