Почему выравнивание текста в flexbox рядом с этим изображением?

Я пытаюсь центрировать логотип и слова «руководство по стилю» рядом друг с другом в заголовке. Я использую flexbox для этого, и позиционирование текста является странным. Я думал, что это может быть связано с тем, что я масштабировал логотип до половины размера, но я не уверен, и я не могу его исправить. Кто-нибудь знает, почему это происходит?Почему выравнивание текста в 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>

И 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.

источник

2016-07-08 Victoria

Необходимо добавить 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 заявление.

источник

2016-07-08 10:08:16

Вы избили меня на 50 секунд: P – Rohit

Спасибо за помощь, теперь он работает! Он по-прежнему выглядит не так хорошо, как я хочу, чтобы он выглядел. Расстояние между текстом и логотипом довольно велико, было бы идеально, если бы оно было примерно таким же или немного больше, чем пространство между стилем и руководством. Я попытался исправить это, изменив поля и paddings, а что нет, но я не могу их приблизить, и я думаю, что flexbox имеет какое-то отношение к этому. Есть идеи, как это сделать? – Victoria

Этот интервал * есть *, вызванный 'transform'. Браузер запоминает исходный размер и выделяет пространство для изображения, как если бы он был по-прежнему в полном размере. –

Почему выравнивание текста в flexbox рядом с этим изображением?

ответ

Смежные вопросы