css - 在 block 幻灯片上居中文本

Question

我试图响应式地将文本置于幻灯片中间。 2个问题: - 文字不在中间 - 在移动宽度/设备上，文本溢出。

如何固定中间的文字而不溢出？

这是 DOM: http://www.bootply.com/dcRsylTvzc

Answer 1

没问题，你可以在这里看到 DOM:

        <ol class="carousel-indicators"> 
          <!-- classe active pour déterminer la première image du diaporama -->
          <li data-target="#diaporama" data-slide-to="0" class="active"></li> 
          <li data-target="#diaporama" data-slide-to="1"></li>  
        </ol> 

        <div class="carousel-inner"> 
            <!-- classe active pour déterminer la première image du diaporama -->
            <div class="item active"> 
                <!-- image1 de background -->
                <img src="http://www.e-enfance.org/images/logo_google.png" alt=""> 

                <!-- Contenu textuel -->
                <div class="carousel-caption"> 
                    <!-- Titre de Bienvenue -->
                    <h1>Bienvenue
                        <strong>chez toi</strong>.
                    </h1>

                    <!-- Texte -->
                    <section>
                        <p> en 3 points ? </p>
                        <ul> 
                            <li> Prmeier </li>
                            <li> Deuxieme </li>
                            <li> Troisieme </li>
                        </ul>                          
                    </section>
                </div> <!--  Fin contenu textuel-->
            </div> <!-- Fin classe active -->


            <div class="item"> 
                <!-- image2 de background -->
                <img src="http://www.e-enfance.org/images/logo_google.png" alt=""> 
                <!-- Contenu textuel -->
                <div class="carousel-caption"> 
                    <!-- Titre de Bienvenue -->
                        <h1>Tu te trouves <br>
                            <strong>là où il faut</strong>.
                        </h1>

                    <!-- Texte -->
                    <section>
                        <p>Avec Meetursam : </p>
                        <ul> 
                            <li> pim </li>
                            <li> pam </li>
                            <li> poum  </li>
                        </ul>   
                    </section>
                </div> <!-- Fin contenu textuel-->
            </div> <!-- Fin item -->

        </div> <!-- Fin de caroussel-inner-->

        <!-- boutons suivant précédent pour les images -->
        <!-- flèche gauche -->
        <a class="left carousel-control" href="#diaporama" data-slide="prev" title="précédent"> 
            <img src="images/thumbnail/iconnes/arrow-left30.png">
        </a> 
         <!-- flèche droite -->
        <a class="right carousel-control" href="#diaporama" data-slide="next" title="suivant"> 
            <img src="images/thumbnail/iconnes/arrow-right30.png">
        </a> 

    </div> <!-- Fin du diaporama = Fin du bandeau de bienvenue -->

和这里的CSS代码:

.item {
  height: 100%; 
  max-height: 59em;
   background-position: center;
   background-size: center;
}
.carousel-caption {
    height: 100%
    display: inline-block;
    vertical-align: middle;
}

我尝试了很多东西，这就是为什么我现在在这里问是否有人。

display: inline-block 好像不行，如何固定中间的文字不溢出？