0
votes

Positionnement de texte réactif?

J'utilise le curseur de carrousel bootstrap avec du texte (carrousel-légende). Il est réactif sur tout le périphérique, mais le texte est toujours centré et situé au bas de l'écran. Je sais comment positionner le texte où que je veux.

Mais si je change de position, il n'est pas correctement affiché sur d'autres périphériques. Je veux juste positionner le texte à gauche et au milieu de l'écran et je veux qu'il reste là quand je redimensionniste la fenêtre de la fenêtre. P>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>                        
                </ol>
          <div class="carousel-inner" role="listbox">
            <!-- Slide One - Set the background image for this slide in the line below -->
            <div class="carousel-item active" style="background-image: url('https://images.wallpaperscraft.com/image/windows_7_black_glass_reflection_26309_1920x1080.jpg')">
              <div class="carousel-caption d-lg-block slide1-bg">
                
                    <h2 class="display-4  slide1-title" style="text-transform: uppercase; font-weight: bold;"></h2><br>
                <p class="lead slide1 slide1-content"><i>TEXT for position</i><br>
                    <a href="#o-nama" class="theme-btn btn-style-one scroll-to-target" data-target="#o-nama">BUTTON</a>
                
              </div>
            </div>
            
               </div>
            </div>        
          </div>
          <div class="carousel-arrow">
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
        </div>
                      
          </div>

html css twitter-bootstrap responsive bootstrap-carousel

3 commentaires

S'il vous plaît partager votre code

2 questions: Où est votre code que vous avez essayé jusqu'à présent? Quel bottestrap utilisez-vous?

Désolé, j'ai ajouté le code, mais oublie d'enregistrer. Je corrige ça maintenant.

3 Réponses :

1
votes

Je ne sais pas si vous voulez centrer le texte horizontalement ou verticalement. Alors les deux réponses: horizontalement fort> L'élément que vous souhaitez centrer .Carousel-légende code> a une largeur de px et des marges en pourcentage.

Vous pouvez utiliser uniquement des valeurs de pourcentage uniquement: p> xxx pré>

ou simplement la largeur complète, car tout le texte contenu est centré: P>

.carousel-caption {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

0 commentaires

1
votes

pour un changement minimal; Remplacez votre bloc de style «CAROUSEL-CAPTION» avec celui ci-dessous:

.carousel-caption .lead {
  text-align: left;
  position: absolute;
  top: 45vh;
}

1 commentaires

C'est tout. Merci!

1
votes

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>                        
                </ol>
          <div class="carousel-inner" role="listbox">
            <!-- Slide One - Set the background image for this slide in the line below -->
            <div class="carousel-item active" style="background-image: url('https://images.wallpaperscraft.com/image/windows_7_black_glass_reflection_26309_1920x1080.jpg')">
              <div class="carousel-caption d-lg-block slide1-bg">
                
                    <h2 class="display-4  slide1-title" style="text-transform: uppercase; font-weight: bold;"></h2><br>
                <p class="lead slide1 slide1-content"><i>TEXT for position</i><br>
                    <a href="#o-nama" class="theme-btn btn-style-one scroll-to-target" data-target="#o-nama">BUTTON</a>
                
              </div>
            </div>
            
               </div>
            </div>        
          </div>
          <div class="carousel-arrow">
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
        </div>
                      
          </div>

0 commentaires