web-dev-qa-db-ja.com

CSSを介した画像上のテキストの水平方向の中央揃え

次のHTMLを検討してください。

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       Text of variable length
    </div>
</div>

どこ：

.image {
    position:relative;
    text-align:center; // doesn't work as desired :(
}

.text {
    position:absolute;
    top:30px;
}

.image divの中央にテキストを水平に配置する方法があるかどうか教えてください。テキストの長さが不明であり、text-alignプロパティが.text divに対して機能しないため、leftプロパティを使用できません:(

ありがとうございました。

csshtmlimagealignment
22
Zaur Nasibov

次のCSSを試してください。

.image {
    position:relative;
}

.text {
    left: 0;
    position:absolute;
    text-align:center;
    top: 30px;
    width: 100%
}
58
Damir Kotoric

これを試して：

.image {

    position:relative;
}

.text {
    width:100%;

    height:100%;
    position: absolute;
    top: 0;
    left: 0px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    display: flex;
}
4
Purnima Sh

まず、ブロックレベルの子孫を要素の幅に「縮小」するために、.image要素をフロートする必要があります。次に、text-align要素で.textを使用します。

.image {
    float: left;
}
.text {
    text-align: center;
}

JS Fiddle demo 。

または、単にdisplay: inline-blockを指定することもできます。これにより、ブロックレベルのコンテンツが含まれ、ドキュメントフローに残ります。

.image {
    display: inline-block;
}
.text {
    text-align: center;
}

JS Fiddle demo 。

3
David Thomas

Background-imageを使用して 'image' divの背景画像として画像を使用することはできません：url（ '/ yourUrl /'）;テキストを独自のdivに配置するのではなく、単に画像divに配置してからtext-align：center;を適用します。

1
CSharpened