使用Flexbox将文本相对于图像对齐

Question

嘿，谢谢您抽出时间协助！

我希望使用flexbox从头开始创建一个网站。我对flexbox完全不熟悉，所以我遇到了一些困难。

网站首页的顶部包含徽标和一些文字。我希望实现以下功能，如果可能的话，只使用flexbox：

然而，我似乎找不到阻止flexbox这样做的方法：

我希望徽标保持居中，而左侧的文字仍然相对于图像。

HTML CODE

<header>
    <h1>Welcome.|</h1>
    <img class="logo" src="assets/images/logo.svg" alt="Logo"/>
</header>

CSS代码

header {
    width: 100vw;
    height: 100vh;
    background-color: #1B1E22;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    width: 80px;
    height: 80px;
}

非常感谢任何帮助！

Answer 1

我认为这就是你要找的东西。您希望徽标以左侧的某些文本为中心。对？

左右Flexbox正在填充空间，基本上以徽标为中心。左侧弹性框将其子元素定位在右侧，使其显示在徽标的左侧。

.main{
  height:200px;
  widows: 100%;
  display:flex;
  flex-direction: row;
  border: 1px solid;
}
.left-flexbox{
  display:flex;
  flex: 1;
  flex-direction: row-reverse;
  align-items: center;
  border: 1px solid;
}
.logo{
  display:flex;
  border: 1px solid;
  align-items: center;
}
.right-flexbox{
  display:flex;
  flex:1;
}

<div class="main">
  <div class="left-flexbox">
    left
  </div>
  <div class="logo">
    <div>logo</div>

  </div>
  <div class="right-flexbox">
  </div>
</div>

Answer 2

您可以使用left: -100px;

的相对位置

例如：http://codepen.io/anon/pen/MpjOyr

＆＃13;

＆＃13;

h1 {
    display: flex;
    right: -100px;
    position: relative;
}

＆＃13;

<p>hi</p>
<h1>x</h1>
<p>Hello</p>

＆＃13;

＆＃13;

＆＃13;