Bootstrap Karussell Beispiel ändern Text Rand und Größe mit CSS

Ich hatte auf einige Hilfe mit Bootstrap Karussell, wie man den Text in den Tags nach oben/vertikal zentriert zu erhoffen. Das Karussell hat eine linke und rechte Steuerung und diese sind vertikal zentriert relativ zu dem Karussell, das eine Höhe von 560 px hat. Der Text, der in den Tags enthalten ist, befindet sich jedoch unterhalb der Steuerelemente und ich möchte auch, dass dieser Text vertikal zentriert (oder nach oben verschoben) wird ... Ich bemühe mich auch, die Schriftgröße der h1-Tags anzupassen, also bin ich rate ich nicht auf die Elemente in meiner CSS-Datei richtig zugreifen.Bootstrap Karussell Beispiel ändern Text Rand und Größe mit CSS

carousel.css

.carousel { 
    height: 560px; 
    margin-bottom: 60px; 
} 

.carousel-caption { 
    z-index: 10; 
} 

.carousel .item { 
    height: 560px; 
    background-color: #777; 
} 

.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 560px; 
}

index.html

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img class="first-slide" src=...."/> 
      <div class="container"> 
       <div class="carousel-caption"> 
        <h1>Text Here!!!!!!!!!!</h1> 
         <p><a class="btn btn-lg btn-primary" href="@Url.Action("Index", "Users")" role="button">Sign up today</a></p> 
       </div> 
      </div> 
     </div> 
     <div class="item"> 
      <img class="second-slide" src=...."/> 
       <div class="carousel-caption"> 
        <h1></h1> 
        <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
       </div> 
      </div> 
     </div> 
     <div class="item"> 

      <div class="container"> 
       <img class="third-slide" src=....."/> 
       <div class="carousel-caption"> 
        <h1>Text Here!!!!!</h1> 
        <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div>

Dank.

Quelle

2017-06-01 Mike

am CSS Nehmen Sie eine Spitze, die vertikal die Kontrollen Zentren und an den Text anzupassen. – hungerstar

Sie HTML-Struktur ist nicht korrekt –

Weiter fügen Sie Ihre 'h1' innerhalb' .caption' div von 'Karussell' Sie müssen es stattdessen in den Container legen. –

Wie Sie die Höhe von 560px wollen, also während Sie das Code-Snippet ausführen, scrollen Sie einfach den Abschnitt.

Um ein Element in der Mitte der Seite zu setzen, die folgende CSS verwenden,

.text-center{ 
    display:flex; 
    align-items:center; 
    text-align: center; 
    width:100%; 
    height:100%; 
}

Versuchen Sie, die folgenden HTML und CSS, den Text und die Taste in der Mitte der Seite sind.

<style> 
 
    .carousel { 
 
    height: 560px; 
 
    margin-bottom: 60px; 
 
} 
 
.text-center{ 
 
    display:flex; 
 
    align-items:center; 
 
    text-align: center; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
.inner-center{ 
 
\t width:100%; 
 
} 
 

 
.carousel-caption { 
 
    z-index: 10; 
 
    
 
} 
 

 
.carousel .item { 
 
    height: 560px; 
 
    background-color: #777; 
 
} 
 

 
.carousel-inner > .item > img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    min-width: 100%; 
 
    height: 560px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    </ol> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      
 
        <div class="text-center"> 
 
        <div class="inner-center"> 
 
         <h1>Sign up today</h1> 
 
         <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
 
       </div> 
 
     \t \t </div> 
 
     </div> 
 
     <div class="item"> 
 
       <div class="text-center"> 
 
        <div class="inner-center"> 
 
         <h1>Learn more</h1> 
 
         <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
 
       </div> 
 
     \t \t </div> 
 
     </div> 
 
     <div class="item"> 
 
      <div class="text-center"> 
 
        <div class="inner-center"> 
 
         <h1>Browse</h1> 
 
         <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse</a></p> 
 
       </div> 
 
     \t \t </div> 
 
     </div> 
 
    </div> 
 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" ></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 
</body> 
 
</html>

Quelle

2017-06-01 15:21:25

Bootstrap Karussell Beispiel ändern Text Rand und Größe mit CSS

Antwort

Verwandte Themen