この画像の横のフレックスボックスでテキストの位置合わせがオフになるのはなぜですか？

Question

私は、ロゴと、「スタイルガイド」という言葉をヘッダーの隣に配置しようとしています。私はこれを行うためにフレックスボックスを使用しています、そして、テキストの位置は奇妙です。私は、ロゴを半分の大きさに拡大したという事実とは関係があるかもしれないと思っていましたが、私は確信が持てませんし、修正できないようです。誰がなぜこれが起こっているのか知っていますか？

HTML：

<div class="header"> 
    <div class="container"> 
     <img src="http://i1077.photobucket.com/albums/w474/skottunder/example-logo_zpsso7yyy5k.jpg"></img> 
     <span id="header-text">Style Guide</span> 
    </div> 
</div> 

とCSS：ここ

.header { 
    background: #317cde; 
    width: 100%;  
} 

.container { 
    margin: 0 auto; 
    padding: 10px 0; 

    width: 320px; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: space-around; 
} 

.header .container img { 
    transform: scale(0.5); 
    float: left; 
} 

#header-text { 
    color: #fff; 
    font-size: 28px; 
    float: left; 
} 

はCodePenです。

Answer 1

align-items:centerを追加する必要があります。

.header { 
 
    background: #317cde; 
 
    width: 100%; 
 
} 
 
.container { 
 
    margin: 0 auto; 
 
    padding: 10px 0; 
 
    width: 320px; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    align-items: center; /* add this */ 
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: space-around; 
 
} 
 
.header .container img { 
 
    transform: scale(0.5); 
 
    float: left; /* can be removed */ 
 
} 
 
#header-text { 
 
    color: #fff; 
 
    font-size: 28px; 
 
    float: left; /* can be removed */ 
 
}

<div class="header"> 
 
    <div class="container"> 
 
    <img src="http://i1077.photobucket.com/albums/w474/skottunder/example-logo_zpsso7yyy5k.jpg" /> 
 
    <span id="header-text">Style Guide</span> 
 
    </div> 
 
</div>

注：お使いのfloat文はflex文によって上書きされます。