Line up three DIVs in the center - html

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">
<img src="arrowleft.jpg">
</div>
<div align="center" class="float-left" id="picture">
<img src="old.jpg">
</div>
<div align="center" class="float-left" id="text">
TEXT
</div>
<div align="center" class="float-left id="arrow-right">
<img src="arrowright.jpg">
</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

Try setting their margins to margin: 0 auto; each. You'll need to specify their widths as well.

Answer 2

Try this CSS:
<style>
.float-left {
display:table-cell;
border: 1px solid black;
}
#page{
display: inline;
width:1000px;
position: absolute;
height: 100%;
width: 100%;
}
#container{
display: table;
width:900px;
vertical-align: middle;
position: relative;
margin:auto;
}
#arrow-left{
position: relative;
}
#picture{
position: relative;
}
#text{
position: relative;
}
#arrow-right{
position: relative;
}
</style>

Answer 3

Your arrow-right div isn't working because the quotation mark is in the wrong place.

Answer 4

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/