html - 在中心排列三个 DIV

Question

我想在我的页面中央排列三个 DIV，但我似乎无法弄清楚。它们垂直排列但不会居中。谁能帮忙？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:(我将向#page 等添加更多内容)

.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

尝试将它们的边距分别设置为 margin: 0 auto;。您还需要指定它们的宽度。