41916


画像に乗せる文字が中央に位置しないです。HTMLでBootstrapを使ってカルーセルを作りました。

[code]

    <main>
                <div id="carousel-container">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <img class="img-responsive" src="test1.jpg" alt="Arch">
                                <p>Test1</p>
                            </div>
    
                            <div class="item contain">
                                <img class="img-responsive" src="test2.jpg" alt="Nature">
                                <p>Test2</p>
                            </div>
                        </div>
                    </div>
                </div>
    
            </main>
    
[/code]

とhtmlに書いて、CSSには

[code]

    .item p{
        position: absolute;
        color: black;
        font-weight: bold;
        font-size: 2em;
        top: 50%;
      　left: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        margin:0;
        padding:0;
    }
    }
    
[/code]

と書きました。HTMLを表示すると、Test1とTest2の文字が画像の左側に表示されています。親要素（ここではitemクラス）の上下左右の中央に配置するように書いたはずなのですが...。htmlは他にも要素が書いてあり、それらの配置はgrid-
systemを使いCSSで配置しています。なぜこのように表示されてしまうのでしょうか？<https://saruwakakun.com/html-
css/reference/image-text> の記事を参考にして作りました。


CC BY-SA 3.0
2018-02-22T05:06:24.443
41914
2018-02-22T05:28:29.070
27403
question
html css
画像に乗せる文字が中央に位置しない


参考にされているサイトにありますが、

>
> 親要素であるdivに対してはposition:relativeを、文字列の入ったpタグに対してはabsoluteを指定します。imgタグはそのままでOKです。

親要素のpositionのCSSを当て忘れていませんか？

また

[code]

    left: 50%;
    
[/code]

こちらのスタイルの前に全角空白が入ってしまっているようです。  
こちらを除去してください


CC BY-SA 3.0
2018-02-22T05:28:29.070
41916
2018-02-22T05:28:29.070
22665
41914
answer