Как плавать изображения и заголовки центра в пространстве?

Question

Я хочу эту структуру, контейнер, который имеет flex: дисплей, изображение, плавающее справа, затем h1 и h2, я хочу поместить эти вертикальные и горизонтальные центры на оставшееся пространство div.

Это мой текущий результат.

Mockup.

+-----------------------+ 
|      | 
|XXXX     | 
|XXXX  HELLFISH  | 
|XXXX born to die | 
|XXXX     | 
|      | 
+-----------------------+ 

Это код html.

div.container 
    img(src='http://vignette3.wikia.nocookie.net/simpsons/images/a/a1/Flying_Hellfish_Logo.png/revision/latest?cb=20150327234211') 
    h1 HELLFISH 
    h2 Born to die 

SCSS.

.container{ 
    display: flex; 
    width: 50%; 
    border: 1px solid red; 
    justify-content: space-between; 
    img{ 
    max-width: 300px; 
    max-height: 300px; 
    float: left; 
    } 
    h1{ 
    align-self: center; 
    margin: auto; 
    position: relative; 
    } 
    h2{ 
    align-self: center; 
    margin: auto; 
    vertical-align:middle; 
    position: relative; 
    } 
} 

Кодепен. http://codepen.io/TabaresSotelo/pen/pRyxPz

С наилучшими пожеланиями

Answer 1

• Заверните h1 и h2 в одном контейнере (который становится родственный гибкий элемент изображения).
• Используйте свойство order, чтобы сместить изображение вправо.
• Вам не нужно использовать float или justify-content: space-between.

.container { 
 
    display: flex; 
 
    width: 50%; 
 
    border: 1px solid red; 
 
} 
 
.nested-container { 
 
    flex: 1; /* to consume all remaining space */ 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.container img { 
 
    max-width: 300px; 
 
    max-height: 300px; 
 
    order: 1; 
 
} 
 
h1, h2 { 
 
    margin: 0; 
 
}

<div class="container"> 
 
    <img src="http://vignette3.wikia.nocookie.net/simpsons/images/a/a1/Flying_Hellfish_Logo.png/revision/latest?cb=20150327234211" /> 
 
    <div class="nested-container"> 
 
    <h1>HELLFISH</h1> 
 
    <h2>Born to die</h2> 
 
    </div> 
 
</div>

revised codepen (скомпилированный код)

Answer 2

Wrap заголовок элементы в другом div и установить margin: 0 auto на этом сНу элемента. DEMO

.container { 
    display: flex; 
    width: 50%; 
    border: 1px solid red; 
    align-items: center; 
    img { 
    max-width: 300px; 
    max-height: 300px; 
    } 
    div { 
    margin: 0 auto; 
    text-align: center; 
    } 
    h1, 
    h2 { 
    margin: 0; 
    } 
} 

.container 
    img(src='http://vignette3.wikia.nocookie.net/simpsons/images/a/a1/Flying_Hellfish_Logo.png/revision/latest?cb=20150327234211') 
    div 
    h1 HELLFISH 
    h2 Born to die