Question

我目前有一张水平和垂直居中的桌子。我想在表格中添加一个标题（最大900px）（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;添加到.tablecontain，但是如果您确实需要，请确保.tablecontain的子代不会继承它在那里添加。

如果您还希望垂直居中标题的文本，则在.tableheader添加line-height:50px;换句话说，将line-height设置为.tableheader div的高度。

垂直对齐表头

1 个答案: