Question

I’m new to working with divs, so I’m not too good at using them. I’m making a music blog, and I want the user to be able to see the picture for the post, and arrows on either side to go to next or previous posts. I’m having trouble centering the arrows in my parent div.

I searched a few things online, but nothing seemed to work. Here is my css for a simple test…

#picture_wrapper {
  width:550px;
  background-color:#00F;
  float:left;
}

#picture_container {
  width: 500px;
  float: left;
  padding-left:5px;
  padding-right:5px;
}

#left_arrow_container {
  float: left;
  top:50%;
  width: 20px;
  height:100%;
  background-color: #F00;
}

#right_arrow_container {
  float: right;
  top:50%;
  width: 20px;
  height:100%;
  background-color: #F00;
}

I set the arrow divs to have a background color of red, and I thought with this code the entire right and left sides would be red, but this is not the case. Only the area around my image is red. Here is the html that I am using.

<div id="picture_wrapper">
  <div id="left_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_left_arrow.png' width = '20' height = '34px'/></div>
  <div id="picture_container"><center><img src = 'http://www.startingtofeelit.com/wp-content/uploads/2012/07/DIIV+zachacry+cole+smith2.jpg' width = '500' /></center></div>
  <div id="right_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_right_arrow.png' width = '20' /></div>
</div>

Here is how it is being displayed on my Dreamweaver now…
pic1 http://www.startingtofeelit.com/images/pic1.png

Here is how I more or less want it to be displayed…
pic2 http://www.startingtofeelit.com/images/pic2.png

Thanks for the help.

Answer 1

Sounds like a job for vertical-align: middle;.

http://jsfiddle.net/Wexcode/Lp5M9/2/

#picture_wrapper { 
    background: #F00;
    float: left;
    font-size: 0;
    white-space: nowrap; }
#left_arrow_container, #right_arrow_container {
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
#picture_container {
    background: #00F;
    padding: 0 5px;
    vertical-align: middle;
    display: inline-block; }

​
Let me know if you have any questions.