元素显示在容器外部，它们位于

我已在我的网站上创建了标题和一部分。我想在该部分中居中文字。我使用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

元素显示在容器外部，它们位于

回答

相关问题