使用zurb Foundation 5时垂直对齐CSS

Simeon 发表于 Dev

西缅

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

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

这使我认为标题面板的CSS中存在某些冲突（或股票基础框架中存在某些冲突），但是我无法解决。感谢任何指针。

谢谢！

我的标头面板的CSS紧随标准ZURB标题栏（高45像素-请参见填充）之后，如下所示：

#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>

然后，我尝试以多种方式为spanMiddle div设置参数-例如

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

我还尝试了以下内容，并使用了专用的p或span标记（在标题面板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;

我要去哪里错了？

弗雷迪

试试这个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;                     
}