如何将底部菜单重叠在图像顶部并将其居中？

Question

I've already set the navbar, the image with the text, and the under part is going to be another menu.我已经设置了导航栏，带有文本的图像，下面的部分将是另一个菜单。 How an I first of all center the bottom menu and overlap it on the image as in the example?我如何首先将底部菜单居中并将其重叠在图像上，如示例中所示？ This is How I want it to look这就是我想要的样子

On the other hand, this is How it looks另一方面，这就是它的样子

I've only placed the code of the image and the under part since the code of the nav bar doesn't matter我只放置了图像的代码和下面的部分，因为导航栏的代码无关紧要

HTML HTML

<!DOCTYPE html>
  <html>
    <head>
      <meta charset='UTF-8'/>
      <title>SerFin</title>
      <link href="https://fonts.googleapis.com/css?family=Lato:300,700|Prata" rel="stylesheet">
      <style>
        .HomeTabImage {
          background-image: url('Images/Chairs.jpg');
          width: 100%;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }
      </style>
      <script>

      </script>
      <link rel='stylesheet' href='Styles.css'/>
    </head>
    <body>
      <header class="TopMenu">
        <nav class="TopSetup-Container">
          <img src="Images/Logo.png"/ id="Logo">
          <ul class="Menu">
            <li><a href="#">Login</a></li>
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
          <ul class="Menu">
            <li><a href="#">Support</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Submission</a></li>
            <li><a href="#">Tutorial</a></li>
          </ul>
        </nav>
      </header>
      <article class="HomeTabImage">
        <h1> Service Finder </h1>
        <p> Let the opportunities begin </p>
        <p> Everything we do is driven by opportunities </p>
        <p> Search and provide services </p>
      </article>
      <article class="Services">
          <h3 id="HomeTabServicesTitle"> Here are the services provided by the community </h3>
          <div class="ServicesContainer">
          <ul class="Options">
            <li><a href="#">Univeristies<br>🎓</br></a></li>
            <li><a href="#">Internships<br>📊</br></a></li>
            <li><a href="#">Courses<br>💻</br></a></li>
            <li><a href="#">Jobs<br>💼</br></a></li>
            <li><a href="#">Services<br>🌐</br></a></li>
          </ul>
        </div>
      </article>
    </body>
  </html>

CSS CSS

.HomeTabImage  {
  height: 340px;
  width: 100%;
  text-align: center;
  line-height: normal;
}

.HomeTabImage h1 {
  font-size: 70px;
  color: black;
}

.HomeTabImage p {
  font-size: 50px;
  color: black;
}

/*Home Tab Info part*/
.Services {
  text-align: center;
  width: 80%;
}

.Services p {
  width: 640px;
}

.ServicesContainer {

}

#HomeTabServicesTitle {
  color: #828282;
  border-bottom: 2px solid #8B8C8C;
  padding-top: 20px;
  padding-bottom: 10px;
}

.Options {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding-top: 20px;
}

.Options li {
  list-style: none;
}

.Options a {
  font-size: 25px;
}

Answer 1

To center it, use margin-left: 10%;要使其居中，请使用margin-left: 10%; . .

For overlapping try using z-index: 2;对于重叠尝试使用z-index: 2; . .

如何将底部菜单重叠在图像顶部并将其居中？

问题描述

1 个解决方案

解决方案1
0 2020-07-06 20:07:52

如何将底部菜单重叠在图像顶部并将其居中？

问题描述

1 个解决方案

解决方案1 0 2020-07-06 20:07:52

解决方案1
0 2020-07-06 20:07:52