Wie vertikal-center ein Bootstrap-carousel-caption?
Ich habe ein bootstrap carousel und ich bin versucht, erstellen Sie eine Beschriftung für das Karussell, das ist immer vertikal zentriert und positioniert sich leicht Links. Ich habe die css-Datei für die horizontale Positionierung.. aber wenn ich versuche, position vertikal, die Beschriftung nicht bleiben. Wie kann ich die halten .carousel-caption immer zentriert vertikal und leicht nach Links?
HTML:
<!-- start JumboCarousel -->
<div id="jumboCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#jumboCarousel" data-slide-to="0" class="active"></li>
<li data-target="#jumboCarousel" data-slide-to="1"></li>
<li data-target="#jumboCarousel" data-slide-to="2"></li>
<li data-target="#jumboCarousel" data-slide-to="3"></li>
</ol><!-- end carousel-indicators -->
<!-- Wrapper for Slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" id="slide1">
<a href="#"><img src="http://placehold.it/1920x720&text=Slide+1" alt="Slide 1"></a>
<div class="carousel-caption">
<h1>Check Out this Moose</h1>
<p class="lead">This text is super engaging and makes you want to click the button.</p>
<a href="#" class="btn btn-lg btn-primary">Learn More</a>
</div><!-- end carousel-caption -->
</div><!-- end slide1 -->
<div class="item" id="slide2">
<img src="http://placehold.it/1920x720&text=Slide+2" alt="Slide 2">
<div class="carousel-caption">
<h1>#Slide Title</h1>
<p class="lead">This text is super engaging and makes you want to click the button.</p>
<a href="#" class="btn btn-lg btn-primary">Learn More</a>
</div><!-- end carousel-caption -->
</div><!-- end slide2 -->
<div class="item" id="slide3">
<img src="http://placehold.it/1920x720&text=Slide+3" alt="Slide 3">
<div class="carousel-caption">
<h1>#Slide Title</h1>
<p class="lead">This text is super engaging and makes you want to click the button.</p>
<a href="#" class="btn btn-lg btn-primary">Learn More</a>
</div><!-- end carousel-caption -->
</div><!-- end slide3 -->
<div class="item" id="slide4">
<img src="http://placehold.it/1920x720&text=Slide+4" alt="Slide 4">
<div class="carousel-caption">
<h1>#Slide Title</h1>
<p class="lead">This text is super engaging and makes you want to click the button.</p>
<button type="button" href="#" class="btn btn-lg btn-primary">Learn More</button>
</div><!-- end carousel-caption -->
</div><!-- end slide4 -->
</div><!-- end carousel-inner -->
</div><!-- end jumboCarousel -->
CSS:
#jumboCarousel {
margin-top: 70px;
min-height: 300px;
min-width: 100%;
}
#jumboCarousel img {
min-height: 300px;
min-width: 100%;
}
#jumboCarousel > .carousel-indicators > li {
border-radius: 0px;
min-width: 25px;
background-color: #9d9d9d;
border: 1px solid black;
margin-right: 10px;;
margin-left: 10px;;
}
#jumboCarousel > .carousel-indicators > .active {
background-color: orange;
}
#jumboCarousel .carousel-caption {
color: black;
right: 58%;
text-align: center;
max-width: 500px;
left: auto;
top: auto;
}
alles, was ich tun geben Sie die Beschriftung eine vertikale Ausrichtung hat, endete mit der Beschriftung immer geschoben von der Oberseite des Karussells als die Bildschirm-Größe abnimmt.. Danke für die Hilfe.
Bootply: http://www.bootply.com/aWK6oVRWVo
genau das, was ich brauchte!! ich danke Euch so sehr, ich hätte nie herausgefunden.
Ok, ich erstelle eine Antwort und erkläre es ein bisschen
InformationsquelleAutor SuperVeetz | 2014-12-03
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie die
translateY
Funktion der CSS-Eigenschafttransform
vertikalen ausrichten der Elemente. Browser-Unterstützung ist ganz anständig, einschließlich IE9.So fügen Sie Folgendes zu Ihrer
.carousel-caption
CSS.Nun müssen Sie, um loszuwerden, die extra
bottom
Raum, ergänzt durch die Standard-bootstrap-CSS. Fügen Sie den folgenden als auch auf Ihr.carousel-caption
CSS.Und nicht zuletzt geben Sie das übergeordnete element, in diesem Fall
.item
folgende CSS zu verhindern, verschwommene Elemente, wenn es sich auf ein halbes pixel.Beispiel
Sie sind herzlich willkommen. Froh, dass ich helfen konnte 🙂
Genial, ich versuchte viele Lösung, aber diese ist die beste (Y)
InformationsquelleAutor Sebsemillia