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;。您还需要指定它们的宽度。

Answer 2

试试这个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

你的右箭头不起作用，因为引号位于错误的位置。

Answer 4

好的，首先我可以看到你的HTML中有拼写错误，如下面的代码片段所示：

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

在此代码段的第一行应该是：

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

换句话说，你忘记了＆＃34;在你的班级签名。

其次，这是一个jsfiddle，左边有三个div，居中。请注意，当您有多个标记元素需要在时尚菜单中设置时，请不要尝试以这种方式对主体进行样式设置，而是将它们封装在容器中，因此只设置此容器的样式。如jsfiddle中所示，我将一个容器w.r.t放在主体而不是3个div中，这样可以提供更清晰的代码并避免将来的冲突。

http://jsfiddle.net/7pvwv5pn/

在中心排列三个DIV

4 个答案: