HTML/CSS - 複数のdivをインラインに配置

Question

私はかなり基本的なものを達成しようとしていますが、これまで成功していませんでした。 親セレクタ（div）の中央に表示する画像とタイトルがあります。残念ながら、私はロゴとテキストの両方を中央に置いたときにそれらを正しく整列させる方法を知らない。

HTML：

<div class="content"> 
    <div class="header"> 
     <img src="path/to/image"> 
     <span>Hey this is my title</span> 
    </div> 
    </div> 

CSS：

.header{ 
    text-align: center; 
    width: 100%; 
    height: 40px; 
} 
.header img{ 
    height: 40px; 
    width: auto; 
    display: inline-block; 
} 
.header span{ 
    display: inline-block; 
} 

テキストが可変の高さを持つことができますが、あなたがロゴは、静的な幅/高さを持って見ることができるように。

誰もがこれを行う方法を教えてもらえます：上記の のコードは以下の例のようなスタイリングが作りますか？私は基本的にいくつかのdivが互いに隣り合っていてほしいが、すべてが中央に整列している。

Answer 1

vertical-align: middleを縦にセンタリングしたいですか？

.header { 
 
    text-align: center; 
 
    width: 100%; 
 
    height: 40px; 
 
} 
 
.header img { 
 
    height: 40px; 
 
    width: auto; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.header span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    background: #eef; 
 
}

<div class="content"> 
 
    <div class="header"> 
 
    <img src="//placehold.it/40?text=Logo" /> 
 
    <span>Hey this is my title</span> 
 
    </div> 
 
</div>

注：私は国境のより良い可視性の背景を追加しました。

良く説明：

Answer 2

使用フレキシボックス。あなたの商品がヘッダーの内側と外側の両方にセンタリングされるようにしたいのであれば、わかりません。単にjustify-content部分を削除しない場合は、

フレキシボックスについて

.header { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: center; 
} 

さらに詳しい情報：https://css-tricks.com/snippets/css/a-guide-to-flexbox/