使用zurb基础时垂直对齐CSS 5

Question

I'm trying to align a line of text in the middle of a header panel (a full width approx 250px high container), using CSS and the Zurb Foundation 5 framework, but can't get it to work for some reason.

I've already tried each of the 6 vertical alignment methods summarised at this link http://www.vanseodesign.com/css/vertical-centering/ (line height method, css table method, absolute position and negative margin, absolute position and stretching, padding top and bottom, floating div). The best I've managed has either floated the text outside of the header panel and in the middle of the whole page or moved the text up or down a short distance (seemingly random) while distorting the height of the header panel.

It leads me to think there's something in the CSS of my header panel that is conflicting (or some conflict in the stock foundation framework) - but I can't work it out. Grateful for any pointers.

Thanks!

The CSS for my header panel which comes immediately after the standard ZURB title bar (45px high - see padding), is as follows:

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

And my HTML layout is:

<section id="headerpanel">       

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

    <div class="spanMiddle">
   <?php print @$this->heading; ?>
    </div>

  </div>
 </div>
</section>

I've then tried setting the params for the spanMiddle div in a number of ways - eg

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

I've also tried it without the below part, and with dedicated p or span tags (set with .p {} or .spam {} immediately after the headerpanel css):

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

I've also tried:

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

and

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

Where am I going wrong?

Answer 1

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

Here is the fiddle

Hope it helps :)

Answer 2

If you can set the header height explicitly you can try out the vertical centering method # 3 from here http://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;}

Here's a fiddle http://jsfiddle.net/j2e4sosx/1/