元素顯示在容器外部，它們位於

我已在我的網站上創建了標題和一部分。我想在該部分中居中文字。我使用Flexbox水平和垂直居中。在屏幕截圖中，您會看到標題下的「英雄文本」部分應位於標題後面。我知道我可以使用定位黑客來解決這個問題，但有沒有更好的方法？元素顯示在容器外部，它們位於

下面是HTML：

<body> 
    <header> 
    <a href="#"><img src="images/lookout-logo-small.png" alt="LookOut Software Logo" id="logo"></a> 
    <nav class="main-nav"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 
    </header> 
    <section id="hero-text"> 
     <h1>LookOut Software</h1> 
     <p>Made in Canada</p> 
    </section> 
</body>

而CSS：

header{ 
width: 100%; 
background: white; 
height: 4.75rem; 
box-shadow: 0 0 2px rgba(6,8,8,0.15); 
position: fixed; 
top: 0px; 
} 

#logo{ 
margin: 1rem; 
} 

nav{ 
top: 0; 
right: 0; 
position: absolute; 
margin: .5rem; 
} 

.main-nav ul{ 
list-style-type: none; 
font-weight: bold; 
} 

.main-nav li{ 
display: inline-block; 
margin: 0 .5rem; 
} 

.main-nav a{ 
text-decoration: none; 
color: #3a3a3a; 
font-size: 0.85rem; 
} 

a:hover{ 
text-decoration: none; 
color: #FF6952; 
border-bottom: 2px solid #30C0D8; 
} 

/* Content area */ 

#hero-text{ 
display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
background-color: #FF6952; 
}

來源

2016-02-19 femmebug

而不是使用在導航部分絕對定位，從而消除它從文檔流程中，考慮使用flexbox for整個佈局。

試試這個：

從nav
刪除絕對定位添加到您的CSS：body { display: flex; flex-direction: column; }

來源

2016-02-19 20:45:09

啊，是的，那也沒關係。我在導航上放置了絕對位置，以便我可以將導航鏈接放在最上面和最右邊。我知道我也可以使用彈性盒子，並使用彈性方向來定位這些鏈接：row，justify-content：flex-end，但是我的標誌應該在左側移動到右側，我嘗試使用align-自我：flex-start它，但它只是因爲某些原因不工作。也許你知道嗎？感謝您的幫助！ – femmebug

'align-self'是*橫軸*（上/下，在這種情況下），所以它不起作用。你需要一個*主軸*解決方案。看到這裏：http://stackoverflow.com/a/33856609/3597276 –

感謝噸@邁克爾。我使用了margin-right：auto來讓我的徽標到位。偉大的貢獻！ – femmebug

元素顯示在容器外部，它們位於

回答

相關問題