ホームページ > ウェブフロントエンド > CSSチュートリアル > ブートストラップカルーセルキャプションを垂直方向の中央に配置し、わずかに左に配置するにはどうすればよいですか?

ブートストラップカルーセルキャプションを垂直方向の中央に配置し、わずかに左に配置するにはどうすればよいですか?

DDD
リリース: 2024-10-26 13:43:03
オリジナル
780 人が閲覧しました

How to Vertically Center Bootstrap Carousel Captions and Position Them Slightly to the Left?

ブートストラップ カルーセル キャプションの垂直方向の配置

カルーセル キャプションを垂直方向の中央に配置し、わずかに左に配置するには、CSS の変換プロパティを利用できます。 translationY 関数。

HTML:

<code class="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&amp;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&amp;text=Slide+2" alt="Slide 2">
            <div class="carousel-caption"></code>
ログイン後にコピー

以上がブートストラップカルーセルキャプションを垂直方向の中央に配置し、わずかに左に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート