滑块没有对齐中心，段落显示与段落重叠

Question

我正在使用bootstrap框架来创建我的网站。我创建了一个 id = flip_pix 的滑块，下一个滑块有一个段落div。在滑块中有3张图片。我面临的问题是滑块下方的段落是重叠的。我希望段落div显示在另一个滑块div的正下方。我希望这能做出回应。

另一个我想让滑块在父div的中间对齐。

HTML：

<div class="panel-body">
     <div class="page-header">
          <h3>What you want <small> from me</small></h3>
     </div>
     <div id="flip_pix">
         <div class="active">
              <img src="img/slider-1.jpg" class="feature-img" alt="" width="100%"/>
         </div>
         <div>
              <img src="img/slider-2.jpg" class="feature-img" alt="" width="100%"/>
         </div>
         <div>
               <img src="img/slider-3.jpg" class="feature-img" alt="" width="100%"/>
         </div>
     </div>
     <div>
         <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>featureImg
     </div>
</div>

CSS：

<style>
        #flip_pix{
            margin: 0 auto;
            position: relative;
        }
        #flip_pix div{
            position: absolute; 
            z-index: 0;
        }
        #flip_pix div.prev{
            z-index: 1;
        }
        #flip_pix div.active{
            z-index: 2;
        }
    </style>

这是截图：

Answer 1

您应该在height: ...px样式定义中添加#flip_pix，因为它的孩子有position: absolute而且它不知道它应该是多少。