Question

我试图将文本放在幻灯片放映的中间，相应地。 2个问题： - 文字没有进入midle - 在移动宽度/设备上，文本溢出。

如何在中间修复文本而不会溢出？

这是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;
}

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

显示：内联块似乎不起作用，如何在中间修复文本而不会溢出？

在块幻灯片放映中居中文本

1 个答案: