Bootstrap span1 horizontal positioning

Question

I have an example here of a problem

http://patrickmchugh.com/template-image-nav-bootstrap.html I am trying to have the navigation arrows on either side of the image sit half way down the window.

I have tried tables, padding, margins but have not been successful. Any suggestions

    <div class="container-fluid">
        <div class="row-fluid">
                <div class="span1">
                    <img src="images/leftArrow.png" alt="back one image"></div>
        <div class="span10 pagination-centered">
                    <img src="images/fashion-1.jpg" alt="fashion-photo"></div>
        <div class="span1">
                    <img src="images/rightArrow.png" alt="next"></div>
        </div>
    </div>

You are going to want to make all of the spans the same height. [This question](http://stackoverflow.com/questions/12330786/is-there-a-way-to-make-all-elements-in-a-row-class-the-same-height) may help you out. — Schmalzy, Jul 11 '13 at 13:53
I implemented that and thanks, so presumably all spans are now the same height, but the arrows still sit at the top of the page. — paddym, Jul 11 '13 at 14:09
There-in lies my problem, how do I get the arrows now to sit halfway down the span? — paddym, Jul 11 '13 at 14:24
As shown below, you could do `position: absolute;` and `top: 50%` — Schmalzy, Jul 11 '13 at 14:42
Leave it with me, I have to pop out of the office! I will have a look later — paddym, Jul 11 '13 at 15:38

Arnold Daniels · Accepted Answer · 2013-07-11T15:09:57.700

1

I'd use position: absolute with top: 50%. A negative margin-top of have the arrow image height makes the vertically centered.

Make the <div> surrounding the image display: inline-block to make it as large as wide as the image instead of the full screen. A padding makes the arrows fall beside the image instead of over them. Add a container to center it all.

<div class="mycontainer">
    <div class="mycarousel">
        <img class="arrow-prev" src="http://patrickmchugh.com/images/leftArrow.png" alt="previous" />
        <img class="arrow-next" src="http://patrickmchugh.com/images/rightArrow.png" alt="next" />
        <img src="http://patrickmchugh.com/images/fashion-1.jpg" alt="fashion-photo" />
    </div>
</div>

The CSS

.mycontainer {
    text-align: center;
}

.mycarousel {
    position: relative;
    padding: 0 25px;
    display: inline-block;
    max-width: 100%;
}

.mycarousel img {
   max-width: 100%;    
}
.arrow-prev {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -7px;
}

.arrow-next {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -7px;
}

See the jsFiddle

edited Jul 11 '13 at 15:09

answered Jul 11 '13 at 13:59

Arnold Daniels

16,516
4
53
82

This answer isn't specific to bootstrap, but will work in your bootstrap site. – Arnold Daniels Jul 11 '13 at 14:06
Just set `max-width: 100%` to make it responsive. I've changed the code and jsFiddle. So have a look. PS. Don't forget to +1 and accept the answer :) – Arnold Daniels Jul 11 '13 at 15:11
Leave it with me, I have to pop out of the office! I will have a look later Arnold. Cheers – paddym Jul 11 '13 at 15:37
Arnold, Works great! I will experiment with a max-height also in there. Much appreciated. – paddym Jul 12 '13 at 13:37

Bootstrap span1 horizontal positioning

1 Answers1

See the jsFiddle