html - 使用绝对定位对齐和居中导航栏

问题描述

我花了很长时间让它按我的意图工作，这让我发疯了。我确信有一个简单的解决方案，但如果是这样，我找不到它。

我正在尝试制作一个带有填充整个视口的旋转木马的主页，导航栏具有透明背景并位于页面顶部并与旋转木马重叠。

我已经让旋转木马正常工作并且导航栏在旋转木马上运行，但我无法让导航栏在页面上居中。

HTML

html,
body {
  font-family: "Roboto Slab", serif;
}

.navbar {
  position: absolute;
  top: 0;
  z-index: 10;
}

.navbar li {
  display: inline-block;
}

.navbar ul {
  display: inline-block; 
}

#homeCarousel {
  width: 100%;
  margin-bottom: 0;
}

#homeCarousel .carousel,
#homeCarousel .carousel-inner {
  max-height: 100vh;
  margin-bottom: 0;
}

#homeCarousel a {
  width: 20px;
  padding: 0;
  margin: 0;
}

<!DOCTYPE html>
<html lang="en">
  <body>
    <div class="container">
      <nav class="navbar navbar-expand-xl">
        <div class="collapse navbar-collapse" id="navbarMain">
          <ul class="nav">
            <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Portfolio</a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="weddings.html">Weddings</a>
                <a class="dropdown-item" href="seniors.html">Senior Pictures</a>
                <a class="dropdown-item" href="formals.html">Formal Events</a>
              </div>
            </li>
            <li class="nav-item"><a class="nav-link" href="index.html"><h3>Some Text</h3></a></li>
            <li class="nav-item"><a class="nav-link" href="booking.html">Booking</a></li>
            <li class="nav-item"><a class="nav-link" href="http://instagram.com/"><i class="fa fa-instagram fa-lg"></i></a></li>
            <li class="nav-item"><a class="nav-link" href="http://facebook.com/"><i class="fa fa-facebook fa-lg"></i></a></li>
          </ul>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain"><i class="fa fa-bars faCustom"></i></button>
      </nav>
    </div>

    <div id="homeCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#homeCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#homeCarousel" data-slide-to="1"></li>
        <li data-target="#homeCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="carousel-caption rounded">
            <h3>Weddings</h3>
            <p>To be added later.</p>
          </div>
          <img class="img-fluid" src="images/works/weddings/wedding (1).JPG" alt="Wedding Styling" />
        </div>
        <div class="carousel-item">
          <div class="carousel-caption rounded">
            <h3>Senior Pictures</h3>
            <p>To be added later.</p>
          </div>
          <img class="img-fluid" src="images/works/seniors/senior (1).JPG" alt="React Lake Campground" />
        </div>
        <div class="carousel-item">
          <div class="carousel-caption rounded">
            <h3>Formal Events</h3>
            <p>To be added later.</p>
          </div>
          <img class="img-fluid" src="images/works/seniors/senior (3).JPG" alt="React Lake Campground" />
        </div>
      </div>
      <a class="carousel-control-prev" href="#homeCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon mr-auto"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#homeCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon ml-auto"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

    <footer>
      <div class="container">
        <div class="row">
          <div class="col text-center">
            <h5>Links</h5>
            <ul class="list-unstyled">
              <li><a href="#">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="booking.html">Booking</a></li>
            </ul>
          </div>
          <div class="col text-center">
            <h5>Social & Contact</h5>
            <div class="col">
              <a href="http://instagram.com/"><i class="fa fa-instagram fa-lg"></i></a>
              <a role="button" class="btn btn-link" href="tel:9032745133"><i class="fa fa-phone fa-lg"></i></a>
            </div>
            <div class="col">
              <a href="http://facebook.com/"><i class="fa fa-facebook fa-lg"></i></a>
              <a role="button" class="btn btn-link" href="mailto:kayleederrickhmua@gmail.com"><i class="fa fa-envelope-o fa-lg"></i></a>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col text-center">
            <p>&#169; 2021 by LD Web Design</p>
          </div>
        </div>
      </div>
    </footer>

    <!-- jQuery, Popper.js, and Bootstrap js plugins, must be in this order -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
  </body>
</html>

标签： htmlcssnavbar

html - 使用绝对定位对齐和居中导航栏

问题描述

解决方案

推荐阅读