使用zurb foundation 5时垂直对齐CSS

Question

我正在尝试使用CSS和Zurb Foundation 5框架，在标题面板（一个全宽约250px高的容器）的中间对齐一行文本，但由于某些原因无法使其工作。

我已经尝试了本链接中总结的6种垂直对齐方法中的每一种http://www.vanseodesign.com/css/vertical-centering/（行高法、css表法、绝对位置与负边距、绝对位置和拉伸、上下填充、浮动div）。我所做的最好的处理是将文本浮动在页眉面板的外部和整个页面的中间，或者在扭曲页眉面板高度的同时将文本上下移动一小段距离（似乎是随机的）。

这让我觉得我的标题面板的CSS中有一些冲突（或股票基础框架中的一些冲突），但我无法解决。感谢你的指点。

谢谢！

我的标题面板的CSS紧跟在标准ZURB标题栏之后（45px高，请参阅填充），如下所示：

#headerpanel {
  background: linear-gradient(rgba(0, 0, 0, 0.3) , rgba(0,0,0,0.3)), url( ../../images/footerbg1.jpg);  
  background-size: cover;
  padding: 45px 0 250px;
  text-align: center;
  position: relative;
}

我的HTML布局是：

<section id="headerpanel">       
 <div class="row">
  <div class="large-12 columns">
    <div class="spanMiddle">
   <?php print @$this->heading; ?>
    </div>
  </div>
 </div>
</section>

然后，我尝试通过多种方式设置spanMiddlediv的参数，例如

#spanMiddle {
  position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

我也尝试过在没有以下部分的情况下，使用专用的p或span标签（在headerpanel css后面立即设置.p｛｝或.spam｛}）：

 <div class="row">
  <div class="large-12 columns">
  </div>
 </div>

我也试过：

.spanMiddle {
position: relative;
top: 50%;
transform: translateY(-50%);
} 

和

    margin-top:auto;
    margin-bottom:auto;

我哪里错了？

Answer 1

试试这个CSS:

#headerpanel {
    background: linear-gradient(rgba(0, 0, 0, 0.3) , rgba(0,0,0,0.3)), url( ../../images/footerbg1.jpg);  
    background-size: cover;
    text-align: center;
    position: relative;
    display: table;
    width: 100%;
    height : 250px; /* Determine the height of the box */
}
#headerpanel .row,
#headerpanel .columns{
    display: table;
    width: 100%;
    height: 100%;                       
}
#headerpanel .spanMiddle {
    display: table-cell;
    text-align: center;
    vertical-align: middle;                     
}

这是小提琴

希望有帮助：）

Answer 2

如果您可以显式设置页眉高度，您可以从这里尝试垂直居中方法#3http://css-tricks.com/centering-in-the-unknown/

 #headerpanel {
 background: linear-gradient(rgba(0, 0, 0, 0.3) , rgba(0,0,0,0.3));
 background-size: cover;
 height: 250px;
 text-align: center;}
.row, .columns  {
height: 100%;}
.columns:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;}
.spanMiddle {
display: inline-block;
vertical-align: middle;}

这是一把小提琴http://jsfiddle.net/j2e4sosx/1/