使用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將文字相對於圖像對齊

回答

相關問題