垂直滑块中心标题

我有一个Foundation Orbit滑块设置。目标是垂直居中标题。我已经完成了中心，但只有在知道身高的时候。由于文本长度会有所不同，这是不够好的。垂直滑块中心标题

这里是一个链接显示当前设置：test page

我的问题是：我怎么做.orbit格中心垂直不知道文字的投入量吧？

HTML

<div class="slide"> 
    <ul class="example-orbit" data-orbit data-options="animation:slide;timer_speed:10000;pause_on_hover:true;navigation_arrows:false;bullets:false;timer:true;slide_number: false;pause_on_hover: true; resume_on_mouseout: true;"> 
    <li> 
     <div class="front-page-caption"> 
     <!-- IF SCREEN SIZE IS SMALL HIDE IMAGE --> 
     <div class="hide-for-small"> <img src="img/bildspel.jpg" alt="slide 1" /> </div> 
     <!-- IF SCREEN SIZE IS SMALL SHOW WHITE IMAGE --> 
     <div class="show-for-small"> <img src="img/white.jpg" alt="slide 1" /> </div> 
     <div class="orbit-caption"> <span> 
      <h2>Vi hjälper er att integrera visioner med kraften från människor människor</h2> 
      </span> </div> 
     </div> 
    </li> 

    <li> 
     <div class="front-page-caption"> 
     <div class="hide-for-small"> <img src="img/bildspel.jpg" alt="slide 1" /> </div> 
     <div class="show-for-small"> <img src="img/white.jpg" alt="slide 1" /> </div> 
     <div class="orbit-caption"> <span> 
      <h2>Vi hjälper er att integrera visioner med kraften från människor människor</h2> 
      </span> </div> 
     </div> 
    </li> 

    </ul> 
</div>

CSS

.orbit-container .orbit-slides-container > * .orbit-caption { 
position: absolute; 
bottom: 0; 
background-color: none; 
color: white; 
width: 70%; 
padding: 0.625rem 0.875rem; 
font-size: 0.875rem; 
top: 0; 
left: 0; 
right: 0; 
height: 76px; 
margin: auto; 
text-align: center; 
}

来源

2014-02-07 Felix

可能的重复http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div –

正如您在提到的职位上评论（http://stackoverflow.com/questions/79461 /垂直对齐元素在div＃comment23752996_84616），它不会在响应网站上工作？ – Felix

以下添加到CSS

display: table;

，并采取了高度。然后，它将作为一个表格，自动将文本垂直居中。

来源

2014-02-07 00:54:09 Matto

在Firefox中无法使用，为什么？我发现这个（http://wisercoder.com/firefox-displaytable-cell-and-absolute-positioning/）表示“Firefox不支持display：table-cell和position：relative的组合” – Felix

垂直滑块中心标题

回答

相关问题