元素出现在他们所在的容器之外

时间：2016-02-19 20:05:43

标签： html css css3 flexbox

我已经在我的网站上创建了标题和部分。我想在该部分中居中。我使用Flexbox水平和垂直居中。在屏幕截图中，您将看到＆＃34;英雄文本的一部分＆＃34;应该在标题下方的部分位于标题后面。我知道我可以使用定位黑客来解决这个问题，但有更好的方法吗？

enter image description here

enter image description here

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

1 个答案:

答案 0 :(得分：1)

不要在导航部分使用绝对定位，而是将其从文档流中移除，请考虑将flexbox用于整个布局。

试试这个：

  • 从nav
    • 中移除绝对定位
  • 将此添加到您的CSS：body { display: flex; flex-direction: column; }
相关问题
最新问题