如何在剩余空间中浮动图像和中心标题？

Posted 2023-03-05

【中文标题】如何在剩余空间中浮动图像和中心标题？

【英文标题】：How to float an image and center headlines in remain space?

【发布时间】：2017-05-27 20:45:37

【问题描述】：

我想要这个结构，一个有flex:display的容器，一个浮动在右边的图像，然后是一个h1和h2，我想把这些垂直和水平中心放在div的剩余空间上。

这是我目前的结果。

样机。

+-----------------------+
|                       |
|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

最好的问候

【参考方案1】：

将h1 和h2 包装在一个容器中（这将成为图像的同级flex 项）。 使用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（编译后的代码）

【参考方案2】：

将标题元素包裹在另一个 div 中，并在该 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