html - 显示 3 个水平 div 中心页面

Question

我有这个 HTML：

<div id="cont">
   <div class="chatarea">
      <div class="row">
         <div class="message">
            <div class="nick">
               <p>Some Nick</p>
            </div>
            <p>Some Message</p>
            <div class="timestamp"><p>Some Timestamp</p></div>
         </div>
      </div>
   </div>
</div>

这个CSS：

#cont {
    width:100%;
    text-align:center;
}
.chatarea
{
    display: table;
    height : 100%;
    padding-top:50px;
    margin:0px;
    width:80%;
}

.nick
{
    width: 400px;
    border-right-style: solid;
    text-align: center;
    height:100%; position:absolute; top:0; left:0;
}

.timestamp
{
    width: 400px;
    border-left-style: solid;
    position:absolute; top:0; right:0; height:100%;
}

.message
{
    border-style: solid;
    padding:0 50px 0 140px;
    overflow:hidden;
    position:relative;
}

我试图在页面中心显示 3 个 div（左右小于中间的一个）。浏览器宽度的 80%。

我在这里做了一个小提琴：http: //jsfiddle.net/zQ9pu/

我遇到了一些麻烦-最好的方法是什么？

Answer 1

只需添加

.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px auto;
width:80%;
}

它工作正常！这是你的新小提琴http://jsfiddle.net/zQ9pu/2/

Answer 2

将这些 div 包含在具有指定宽度的父块级元素中，然后margin-left: auto; margin-right: auto;在其上应用 CSS。