css - 垂直对齐表头

Question

我目前有一个水平和垂直居中的表格。我想在表格中添加一个标题（最大 900 像素）（85%）宽并保持表格居中。我怎样才能做到这一点？我正在考虑使用一行？这是小提琴http://jsfiddle.net/jfarr07/ajQaL/

HTML

  <div class="containcell"><div class="columnsleft"></div></div>

  <div class="containcell"><div class="columnsright"></div></div>

</div>
</div>
</div>

CSS

.containcell {
display:table-cell;
vertical-align: middle;
width:24%;
}
.tablecontain {
margin:0 auto;
max-width:1000px;
height:100%;
min-height:100%;
}
.columncontainer {
width:85%;
max-width:900px;
margin:0 auto;
height:100%;
min-height:100%;
display:table;     
}
.blurredwedding {
background-image:url(../img/oakglen.png);
background-attachment:fixed;
background-repeat:none;
background-size:cover;
height:100%;
width:100%;
min-height:100%;
margin-top:100px;
position:relative;
display:table;
}
.columnsleft {
width:90%;
height:400px;
text-align:center;
position:relative;
-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.5);
-moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.5);
box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.5);

}
.columnsright {
 width:90%;
 height:400px;
 text-align:center;
 position:relative;
 -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.5);
 -moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.5);
 box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.5);

} 

Answer 1

<div class="blurredwedding">

  <div class="headercotainer">
      <h1 class="tableheader">This is your header</h1>
  </div><!--headercontainer should be added here!-->

  <div class="tablecontain">
    <div class="columncontainer">
      <div class="containcell"><div class="columnsleft"></div></div>

      <div class="containcell"><div class="columnsleft"></div></div>

      <div class="containcell"><div class="columnsright"></div></div>

    </div>
   </div>
</div>

为容器添加 css。

.headercontainer
    {
    max-width:900px;
    height:50px;
    text-align:center;
    display:block;
    }

和标题本身......

.tableheader{
    margin:auto;
    width:600px;
    text-align:center;}

您可能还需要添加display:block;to .tablecontain，但如果您确实需要添加它，请确保 .tablecontain 的子代没有从它继承。

如果你还想将表头的文字垂直居中，那么在.tableheaderaddline-height:50px;换句话说，将 line-height 设置为 .tableheader div 的高度。