Question

我试图在网站上使用Superslides（https://github.com/nicinabox/superslides/）和Boostrap 3。

它似乎工作得很好，但我需要帮助垂直对齐我的文本内容。我已经尝试过绝对的位置，并修复了，但似乎没有任何效果。

当每张幻灯片的内容有不同的高度时，我应该如何垂直对齐我的容器？

我的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>

Answer 1

在 CSS 下面添加：

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

Fiddle

Fiddle回复评论/ Fullscreen

Answer 2

您正在使用的插件是在生成的HTML标记上应用内联样式。（在li元素上）

您可以通过添加以下样式来强制使用!important子句覆盖内联样式。

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

此外，您可能希望摆脱top类的padding和.container属性。

垂直对齐Superslides内的内容

2 个答案:

Fiddle

Fiddle回复评论/ Fullscreen