css - 縦位置 - 画像中央寄せ html

CSSを使用したイメージ上のテキストの水平方向のセンタリング (3)

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

次の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プロパティは使用できません。

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

これを試して：

.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;
}

最初に、ブロックレベルの子孫を要素の幅に「崩壊させる」ために.image要素を浮動させ、 text-align要素に.text要素を使用する必要があり.text 。

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

JSフィドルのデモ

あるいは、 display: inline-blockするだけで、ブロックレベルの内容が含まれ、ドキュメントフローに残るようにすることもできます。

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

JSフィドルのデモ

css - 縦位置 - 画像 中央寄せ html

CSSを使用したイメージ上のテキストの水平方向のセンタリング (3)

css - 縦位置 - 画像中央寄せ html