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

-1

我正在寻找使用flexbox从头开始创建网站。我对flexbox完全陌生，所以我遇到了一些困难。

网站首页的顶部包含徽标和一些文字。我期待实现以下，专门使用Flexbox的如果可能的话：

不过，我似乎无法找到一种方法，从这样停止Flexbox的：

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

HTML代码

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

任何帮助将不胜感激！

来源

2017-03-06 Kenny Heard

问题寻求帮助的代码必须包括必要的重现它最短的代码**在问题本身**最好在[**堆栈片段**]（https：//开头博客.stackoverflow.com/2014/09 /引入可运行的JavaScript-CSS-和HTML的代码段/）。请参阅[**如何创建一个最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –

但基本上......您无法实际使用定位。 Flexbox并不是真正的解决方案。 –

哦，我的道歉。据我了解，我需要将现有代码添加到问题中才能使其成为“主题内容”？我希望我的修改是足够的。 –

我认为这是你在找什么。您希望徽标以左侧的一些文字为中心。对？

什么情况是左右flexbox填充空间平等，基本上居中标志。左侧的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>

来源

2017-03-06 16:52:04

这真的很有帮助，谢谢。基本上在标志的右侧使用空的柔性盒的想法在某种程度上没有发生过。无论如何，我稍微调整了这个想法，看到这里：http://codepen.io/anon/pen/LWRXYM。我已经将flex-basis设置为120px，以便在80px徽标的每一侧创建有效的40px的填充。 –

-1

你可以使用一个相对位置left: -100px;

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

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

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

来源

2017-03-06 16:51:03

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

回答

相关问题