Html 为什么此图像旁边的flexbox中的文本对齐被禁用？

我试图将一个徽标和“style guide”（风格指南）放在标题的中心位置。我用flexbox来做这件事，文本定位很奇怪。我想这可能与我将徽标缩小到一半有关，但我不确定，我似乎无法修复它。有人知道为什么会这样吗

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>

---

这是一个。

您需要添加

对齐项目：居中

.header{
背景：#317cde；
宽度：100%；
}
.集装箱{
保证金：0自动；
填充：10px0；
宽度：320px；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
对齐项目：居中；/*添加此项*/
-webkit flex流：行换行；
证明内容：周围的空间；
}
.header.container img{
变换：比例（0.5）；
浮动：左；/*可以删除*/
}
#标题文本{
颜色：#fff；
字号：28px；
浮动：左；/*可以删除*/
}

风格指南

你赢了我50秒：谢谢你的帮助，现在可以了！但它仍然没有我想要的那么好看。文本和徽标之间的间距相当大，如果与样式和指南之间的间距大致相同或稍大，则会非常理想。我试图通过改变边距和填充物来解决这个问题，但我似乎无法让它们更接近，我想flexbox与此有关。你知道怎么做吗？间距是由变换引起的。浏览器会记住原始大小并为图像分配空间，就好像它仍然是完整大小一样。

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