Center caption vertical in slider

Question

I have a Foundation Orbit slider set up. The goal is to center the caption vertically. I have accomplished to center it but only if the height is known. Because the text length will vary this is not good enough.

Here is a link showing the current setup: test page

My question is: how do I make the .orbit div center vertically without knowing the amount of text put in it?

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;
}

Possible duplicate of http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — Michael Pasqualone, Feb 07 '14 at 00:49
As commented on the post you are mentioning (http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div#comment23752996_84616), it won't work on responsive sites? — Felix, Feb 07 '14 at 00:54

score 1 · Accepted Answer · answered Feb 07 '14 at 00:54

1

Add the following to the css

display: table;

and take out the height. It will then act as a table, which automatically centers the text vertically.

answered Feb 07 '14 at 00:54

Matto

236
3
12

Doesn't work in Firefox, any idea why? I found this (http://wisercoder.com/firefox-displaytable-cell-and-absolute-positioning/) that says "Firefox doesn’t support a combination of display:table-cell and position:relative" – Felix Feb 08 '14 at 14:58

Center caption vertical in slider

1 Answers1