使用zurb Foundation 5时垂直对齐CSS答案

【问题标题】：Vertical align CSS when using zurb foundation 5使用zurb Foundation 5时垂直对齐CSS
【发布时间】：2014-11-11 09:39:12
【问题描述】：

我正在尝试使用 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 标签（在 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;

我哪里出错了？

【问题讨论】：

标签： html css zurb-foundation-5

【解决方案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;                     
}

这里是fiddle

希望对你有帮助:)

【讨论】：

它唯一没有做的是偏移我正在使用的顶部栏的 45px 高度。当我放回“填充：45px 0 250px;”它坏了，但我希望文本降低 45px。填充顶部：45px；解决这个问题。
可以添加css 'padding-top: 45px;'在#headerpanel

【解决方案2】：

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

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

【讨论】：