Vertically align content inside Superslides

Question

Im trying to use both Superslides (https://github.com/nicinabox/superslides/) and Boostrap 3 on a site.

It seem to be working quite good, but I need help to vertical align my text content. I have tried position absolute, and fixed, but nothing seems to work.

How should I verticaly align my container, when the content of each slide has a different height?

What it looks like now: http://jsfiddle.net/2P3zL/

my html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Slides</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://nicinabox.com/superslides/dist/stylesheets/superslides.css">


</head>
<body>
  <div id="slides">
    <ul class="slides-container">


    <li>
      <img src="http://nicinabox.com/superslides/images/girl.jpg" alt="">
      <div class="container">
        <div class="row">
            <div class="col-xs-6 col-xs-offset-3">
            <div class="well">              
                <p>Text 1</p>
            </div>
            </div>
        </div>
      </div>
    </li>


    <li>
      <img src="http://nicinabox.com/superslides/images/building.jpg" alt="">
      <div class="container">
        <div class="row">
            <div class="col-xs-6 col-xs-offset-3">
            <div class="well">              
                <p>Text 2</p>
            </div>
            </div>
        </div>
      </div>
    </li>


    <li>
      <img src="http://nicinabox.com/superslides/images/floor-kid.jpg" alt="">
      <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="well">
                <h1>Heading 3</h1>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-6">
            <div class="well">
            <table class="table">
                <tbody>
                    <tr>
                        <td>Table:</td>
                        <th class="text-right">1</th>
                    </tr>
                    <tr>
                        <td>Table:</td>
                        <th class="text-right">2</th>
                    </tr>
                    <tr>
                        <td>Table:</td>
                        <th class="text-right">3</th>
                    </tr>
                    <tr>
                        <td>Table</td>
                        <th class="text-right">4</th>
                    </tr>
                    <tr>
                        <td>Table</td>
                        <th class="text-right">5</th>
                    </tr>

                </tbody>
            </table>
            </div>
            </div>
            <div class="col-xs-6">
            <div class="well">
            <table class="table">
                <tbody>
                    <tr>
                        <td>Table:</td>
                        <th class="text-right">6</th>
                    </tr>
                    <tr>
                        <td>Table</td>
                        <th class="text-right">7</th>
                    </tr>
                    <tr>
                        <td>Table</td>
                        <th class="text-right">8</th>
                    </tr>
                    <tr>
                        <td>Table</td>
                        <th class="text-right">9</th>
                    </tr>
                    <tr>
                        <td>Table</td>
                        <th class="text-right">10</th>
                    </tr>

                </tbody>
            </table>
            </div>
        </div>
      </div>
    </li>

  </ul>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://nicinabox.com/superslides/javascripts/jquery.easing.1.3.js"></script>
  <script src="http://nicinabox.com/superslides/javascripts/jquery.animate-enhanced.min.js"></script>
  <script src="http://nicinabox.com/superslides/dist/jquery.superslides.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $( document ).ready(function() {
        $('#slides').superslides({
          animation: 'fade',
          play: 7000,
          pagination: true
        });
    });


  </script>
</body>
</html>

For vertical alignment with unknown dimensions, you can refer to my [answer here](http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474). — Hashem Qolami, Feb 27 '14 at 12:02

Zword · Accepted Answer · 2014-02-27T12:54:17.747

1

Add below CSS:

.container{
    display:table;
    width:100%;
    height:100%;
}
.container .row{
    display:table-cell;
    vertical-align:middle;
 }

Fiddle

Fiddle in response to the comment / Fullscreen

edited Feb 27 '14 at 12:54

answered Feb 27 '14 at 12:08

Zword

6,605
3
27
52

@Alvaro see his fiddle – Zword Feb 27 '14 at 12:10
Looks great for slide 1 and 2, but a bit wonky on slide 3. Anything I could do to fix it? – Tomas Jacobsen Feb 27 '14 at 12:39
@Garreth00 put heading and table in the 3rd slide in single `
...
`. Fiddle : http://jsfiddle.net/2P3zL/3/ – Zword Feb 27 '14 at 12:51

score 0 · Answer 2 · answered Feb 27 '14 at 12:05

The plugin you are using is applying inline styles on your generated HTML markup. (on the li elements)

You could accomplish it by adding the following styles forcing to overwrite the inline styles with the !important clause.

.container {
    display: table-cell !important;
    vertical-align: middle;
}
.slides-control li{
    display:table !important;
}

Also, you might want to get rid of the top and padding properties for the .container class.

Vertically align content inside Superslides

2 Answers2

Fiddle

Fiddle in response to the comment / Fullscreen