css - 垂直对齐表头

Question

我目前有一个水平和垂直居中的表格。我想在表格中添加一个标题(最大 900 像素)(85%) 并使表格居中。我怎样才能做到这一点？我在考虑使用一行？这是 fiddle 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;
    }

和 header 本身...

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

您可能还需要将 display:block; 添加到 .tablecontain 中，但只需确保 .tablecontain 的子项是' 如果您确实需要在此处添加它，则从中继承它。

如果你还想垂直居中标题的文本，那么在 .tableheader 中添加 line-height:50px; 也就是说，将 line-height 设置为高度.tableheader div 的。