Line up three DIVs in the center

Question

I want to line up three DIV's in the center of my page, but I can't seem to figure it out. They line up vertically but they won't center themselves. Can anyone help? HTML:

<div id="page">
     <div id="head">
           <h1>Final Project</h1>
      </div>

       <div id="container">

            <div align="center" class="float-left" id="arrow-left">
                    <a href=""><img src="arrowleft.jpg"></a>
            </div>

            <div align="center" class="float-left" id="picture">
                    <a href=""><img src="old.jpg"></a>
             </div>

             <div align="center" class="float-left" id="text">
                            TEXT
             </div>

              <div align="center" class="float-left id="arrow-right">
                            <a href=""><img src="arrowright.jpg"></a>
              </div>
         </div>
<div>

CSS: (I'm going to add more to #page and such)

.float-left {
    float:left;
    border: 1px solid black;
}
#page{
    display: inline;
    width:1000px;
    position: absolute;
    height: 100%;
    width: 100%;
}

#container{
    display: inline;
    width:900px;
    vertical-align: middle;
    top: 50%;
    position: relative;
}

#arrow-left{
    display: inline;
    top: -50%;
    position: relative;
}

#picture{
    display: inline;
    top: -50%;
    position: relative;
}

#text{
    display: inline;
    top: -50%;
    position: relative;
}

#arrow-right{
    display: inline;
    top: -50%;
    position: relative;
}

Answer 1

Okay so first of all I can see you have a typo in your HTML as shown in the below snippet of your code:

 <div align="center" class="float-left id="arrow-right">
     <a href="">
     <img src="arrowright.jpg"></a></div>
 </div>

On the first line of this snippet it should be:

 <div align="center" class="float-left" id="arrow-right">

In other words you forgot the " in your class signature.

Second, here is a jsfiddle with three divs floating to the left and are centered. Note when you have multiple markup elements that require to be set in a menu like fashion do not try to style these in this fashion with respect to the body but enclose them in a container and therefore style only this container. As shown in the jsfiddle I center one container w.r.t the body and not 3 divs, this gives cleaner code and avoids future conflicts.

http://jsfiddle.net/7pvwv5pn/