CODEWITHSUNDEEP
htmlcss
Beginner
Beginner

Reputation: 29553

How to float a div vertical center aligned in another div

I have a slideshow. I also have a previous and next button. The slideshow re-sizes according to the screen size it is displayed on. I need the previous and next button to always be in the center of the slide show. If I add position: absolute; it does not look right on bigger screens.

html: 

<div class="slideshow" style="position: relative;">
    </div>
    <div id="prev"></div>
    <div id="next"></div>

css:

#prev, #next
{
    position: absolute;
    z-index: 20;
    width: 41px;
    height: 80px;
    cursor: pointer;
    top: 300px;
}

#prev
{
    left: 0;
    background-image: url("img/prev.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}

#next
{
    right: 0;
    background-image: url("img/next.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}

Upvotes: 0

Views: 948

Answers (5)

Shailender Arora
Shailender Arora

Reputation: 7778

i hope you are looking like this :- DEMO

HTML

<div id="slideshow">
    <div id="prev"></div>
    <div id="next"></div>
 </div>

CSS

#slideshow {
    position: relative;
    border:1px solid red;
}

#prev, #next
{
    position: absolute;
    width:70px;
    height: 70px;
    cursor: pointer;
    background-position: 0 0;
    background-repeat: no-repeat;


}

#prev
{
    left:50%;
    background-image: url("http://www.mouserunner.net/free_games/Right_Arrow_Icon_Black.png");
}

#next
{
    right:50%;
    background-image: url("http://www.mouserunner.net/free_games/Right_Arrow_Icon_Black.png");
    background-position: 0 0;
}

Upvotes: 0

Naveen Sharma
Naveen Sharma

Reputation: 586

<div id="prev"></div>
<div id="next"></div>

These should be inside

<div class="slideshow" style="position: relative;">
</div>

and then inside css

#prev, #next{position:absolute;top:50%}

I hope it will fix your issue

Upvotes: 0

Kudos
Kudos

Reputation: 375

I'm assuming the slideshow is full screen as the prev/next elements are outside the slideshow.

http://jsfiddle.net/kudoslabs/aFJze/

you need to position the top to 50% and offset the height of the anchors.

#prev, #next{
top: 50%;
margin-top: -20px ; /*half the height of the element, assuming 40px*/
}

Upvotes: 3

syed imty
syed imty

Reputation: 1028

try this, you should adjust the css a bit , specifically margin-left to make them look side by side properly

Demo Demo

#prev
{
    position: absolute;
    z-index: 20;
    width: 41px;
    height: 80px;
    cursor: pointer;
    top: 50%;
    left : 50%;
    margin-left:0px;
    margin-top:-40px;
} 

#next
{
    position: absolute;
    z-index: 20;
    width: 41px;
    height: 80px;
    cursor: pointer;
    top: 50%;
    left : 50%;
    margin-left:-60px;
    margin-top:-40px;
}

Upvotes: 0

user1130272
user1130272

Reputation:

As i see it not positioning correctly because 

    <div id="prev"></div>
   <div id="next"></div>

Doesnt have a wrapper what has a position relative, i see the slideshow has it, place it inside and position it should be fine

this

<div class="slideshow" style="position: relative;">
    </div>
    <div id="prev"></div>
    <div id="next"></div>

to this

<div class="slideshow" style="position: relative;">
    <div id="prev"></div>
    <div id="next"></div>
</div>

Upvotes: 1

Related Questions