Css 将旋转木马文本对齐，使其看起来像引导程序2.3.2

我使用的是当前的Bootstrap CSS，但我想将文本底部和左侧对齐，与我在YouTube上看到的Bootstrap 2.3.2教程的样式类似。基本上，文本不会直接放在图片的主体上

有人已经这样做了吗？如果是，是如何做到的

谢谢

---

只需在样式表中添加一些css：

---

只需在样式表中添加一些css：

---

你说的是哪篇课文？底部中间的那个？旋转木马图像上的H2和H4文本，最后一张幻灯片上写着（H2）美丽和下面（H4）指甲-面部-打蜡，就在图片的正上方，看起来糟透了。我想它看起来更像左下角。就像2.3.2旋转木马似乎是标准的。你在说什么文本？底部中间的那个？旋转木马图像上的H2和H4文本，最后一张幻灯片上写着（H2）美丽和下面（H4）指甲-面部-打蜡，就在图片的正上方，看起来糟透了。我想它看起来更像左下角。就像2.3.2旋转木马似乎是标准的一样。很好的一个谢谢miroNice一个谢谢miro

 <!-- Carousel -->


        `enter code here`<!-- opening div -->       
         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

       <!-- Indicators -->
       <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
           <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox"> 

         <!-- open listbox -->
         <div class="item active">
          <img class="img-responsive" src="https://lh4.googleusercontent.com/-aCIY16PFylg/VsW6L-YwpqI/AAAAAAAAADA/wSTG1QlJLqY/w1310-h524-no/Progression_Val_dIsere.png" alt="...">
            <div class="carousel-caption">

            </div>
          </div>

            <div class="item">
         <img class="img-responsive" src="https://lh5.googleusercontent.com/-WHXl1TAoHoQ/VsW7_mHWeQI/AAAAAAAAAEQ/nzQm8w62c3s/w1310-h524-no/Progression_Massage_Budha.png" alt="...">
            <div class="carousel-caption">
            <h2>Massage</h2>
            <h4>Relaxation to Sports/Deep Tissue</h4>
            </div>
            </div>

          <div class="item">
           <img class="img-responsive" src="https://lh4.googleusercontent.com/-lj7DIStRI8M/VthrRPFcQFI/AAAAAAAAAFY/2ynRLjTZTnI/w1310-h524-no/Progression_Beauty_Therapies.png" alt="...">
           <div class="carousel-caption">
               <h2>Beauty</h2>
               <h4>Nails - Facials - Waxing</h4>
           </div>
         </div>

       </div> <!--close listbox -->

           <!-- Controls -->
              <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
              <span class="glyphicon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
              <span class="glyphicon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
              </a>

        </div>

         <!-- Javascript files should be linked at the bottom of the page -->
          <script src="js/jquery.min.js"></script>

        <!-- Latest compiled and minified JavaScript -->
         <script src="js/bootstrap.min.js"></script>

`enter code here`/* carousel */

`enter code here`.carousel img {
    min-width: 100%;
}

`enter code here`/*!
 * Better Bootstrap Carousel V1.0.0
 *
 * Handcrafted by @haydennedyah from #LetsFixTheWeb
 *
 * Url http://LetsFixTheWeb.com
 */
.carousel-control {
    top: 0px;
    left: 0px;
    width: 20%;
    height: 100%;
    margin-top: 0px;
    font-size: 0px;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: none;
    opacity: 0;
}

`enter code here`.carousel-control.right {
    right: 0px;
}

`enter code here`.carousel-control:hover{
    opacity: 0;
}

.carousel-caption {
    right: 0;
    left: 0;
    padding: 30px;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    text-align: left;
}