は垂直、私は私のページでは、この次のHTMLコードを持っている任意のブラウザ

Question

で同じ水平線で共通のdiv内の中心画像とラベルを揃える：

<div class="container"> (Can't have static height) 
    <img></img> (Has variable height) 
    <label></label> (Has variable length) 
</div> 

私は垂直方向に同じラインでそれらの両方を揃えたいです任意のブラウザに適用されます。標準的な方法で可能なら、どうすればいいですか？ この問題を解決するために多くの記事を検索して読みましたが、うまく機能しませんでした。

編集：この場合の「コンテナ」divは、ページのメインコンテナdivではなく、その上に他の3つの親があり、その位置には影響しません。

Answer 1

あなたはを追加することにより、フレックス使用することができます。と前：中央に常に画像/テキストを行いますflex:1と後。そして、あなたは彼らがこのように同じ列に整列させるために、画像やテキストのために再びフレックス使用することができます。

は、より良い結果を見るためにページ全体を行く

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.page { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    height: 100vh; 
 
} 
 

 
.page:before, 
 
.page:after { 
 
    content: " "; 
 
    flex: 1; 
 
} 
 

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

 
label { 
 
    padding: 5px; 
 
}

<div class="page"> 
 
    <div class="container"> 
 
    <img src="https://lorempixel.com/200/200/"> 
 
    <label>text</label> 
 
    </div> 
 
</div>

Answer 2

あなたは可能性がありtext-align,displayおよびline-heightを次のように使用してください。

<style> 
    .container{ 
     text-align: center; 
    } 
    .container label{ 
     display: block;  
     line-height: 0; /*To stick the label under the bottom edge of the image*/ 
    } 
    .container img{ 
     display: inline-block; 
    } 
    </style> 

これをチェックアウトDEMO