Flexを表示すると、テキストが垂直に上になり、イメージが中央に配置されます。

Question

私はFlex Layoutを使用しようとしています。

現在、私は2つのフレックスボックスを持っています。テキストと2番目のテキストとイメージの両方があります。

flex-container { 
 
    border: 1px solid; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.flex-item { 
 
    flex: 1 auto; 
 
    border: 1px solid green; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.flex-center { 
 
    align-items: center; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item">I'm top dog! 
 
    </div> 
 
    <div class="flex-item flex-center"> 
 
    I want to be vertically centered! And I am! 
 
    </div> 
 
</div> 
 
<div class="flex-container"> 
 
    <div class="flex-item">I'm top dog!Previous. Next. Image for Scented Lolly Dude Small Hardtop Pencil Case from Smiggle ... Tall Pencil Pack X24 any 2 for $20 Tall Pencil Pack X24 $12.95 AUD. Previous. Next. Image for Scented Lolly Dude Small Hardtop Pencil Case from Smiggle 
 
    ... Tall Pencil Pack X24 any 2 for $20 Tall Pencil Pack X24 $12.95 AUD. 
 
    </div> 
 
    <div class="flex-item flex-center"> 
 
    <img src="data:image/jpeg;base64,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" 
 
    /> 
 
    </div> 
 
</div>

ThisはPlunkerアイデア

Answer 1

このdiv

から flex-centerを削除すると予想してくださいしているいずれかであります

<div class="flex-item"> 
    I want to be vertically centered! And I am! 
</div> 

は

.flex-center { 
    align-self: center; 
} 

Updated plunkr

Answer 2

固定タイプミスや冗長なスタイルを削除するCSSで画像

<div class="flex-item flex-center"> 
    <img src="" /> 
</div> 

変更.flex-centerを含むdiv上のクラスにしてください。

.flex-container { 
 
    border: 1px solid; 
 
    display: flex; 
 
} 
 

 
.flex-item { 
 
    border: 1px solid green; 
 
    height: 100%; 
 
} 
 

 
.flex-center { 
 
    align-self: center; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item">I'm top dog! 
 
    </div> 
 
    <div class="flex-item flex-center"> 
 
    I want to be vertically centered! And I am! 
 
    </div> 
 
</div> 
 
<div class="flex-container"> 
 
    <div class="flex-item">I'm top dog!Previous. Next. Image for Scented Lolly Dude Small Hardtop Pencil Case from Smiggle ... Tall Pencil Pack X24 any 2 for $20 Tall Pencil Pack X24 $12.95 AUD. Previous. Next. Image for Scented Lolly Dude Small Hardtop Pencil Case from Smiggle 
 
    ... Tall Pencil Pack X24 any 2 for $20 Tall Pencil Pack X24 $12.95 AUD. 
 
    </div> 
 
    <div class="flex-item flex-center"> 
 
    <img src="data:image/jpeg;base64,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" 
 
    /> 
 
    </div> 
 
</div>