html - 导航栏问题中的居中 Logo

标签 html css

我设法使 Logo 居中显示在更大的显示屏上。但是，当尺寸从 768px(例如 767px)变小时。 Logo 和导航有点乱。

我们将不胜感激任何形式的帮助。

.neighborhood-guides {
  background-color: #efefef;
  border-bottom: 1px solid #dbdbdb;
}

.neighborhood-guides h2 {
  color: #393c3d;
  font-size: 24px;
}

.neighborhood-guides p {
  margin-bottom: 13px;
  font-size: 15px;
}

.nav {
  height: 160px;
}

.nav img {
  position: absolute;
  height: 150px;
  display: block;
  left: 50%;
  margin-left: -50px;
}

.nav a {
  text-decoration: none;
  border: 1px solid black;
  border-radius: 10px;
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 4px;
  text-transform: uppercase;
}

.nav a:hover {
  background: #efefef;
}

.nav li {
  display: inline;
  margin-right: 15px;
}

.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
  position: absolute;
  text-align: left;
}

.carousel-caption h1 {
  color: #fff;
  font-size: 48px;
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.carousel-caption p {
  font-size: 20px;
  color: #fff;
}

.carousel-caption a {
  font-size: 20px;
  color: orange;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
<div class="nav">
  <div class="container">

    <ul class="pull-left">
      <li><a href="#">Home</a></li>
      <li><a href="#">all</a></li>
    </ul>
    <img src="http://shoppiz.ga/img/cms/logoblack.png" class="img-responsive">
    <ul class="pull-right">
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </div>
</div>


<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://hdwall.us/wallpaper_1920x1080/sun_cherry_blossoms_trees_flowers_desktop_1920x1080_hd-wallpaper-1194807.jpg" class="img-responsive">
      <div class="carousel-caption">
        <h1>Find a place to stay.</h1>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
        <a href="#">Learn More</a>
      </div>
    </div>
    <div class="item">
      <img src="http://xinature.com/wp-content/uploads/2016/10/forests-view-trees-sunlight-landscape-nature-sun-tree-sunrasy-sunrise-splendor-lovely-sunset-beautiful-woods-forest-magic-peaceful-rays-beauty-sky-hd-backgrounds-1920x1080.jpg" class="img-responsive">
      <div class="carousel-caption">
        <h1>Find a place to stay.</h1>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
        <a href="#">Learn More</a>
      </div>
    </div>
    <div class="item">
      <img src="https://wallpaperscraft.com/image/belgium_winter_garden_sun_sky_clearly_trees_60892_1920x1080.jpg" class="img-responsive">
      <div class="carousel-caption">
        <h1>Find a place to stay.</h1>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
        <a href="#">Learn More</a>
      </div>
    </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">
      <span class="icon-next"></span>
    </a>
  </div>
</div>


<div class="neighborhood-guides">
  <div class="container">
    <h2>Neighborhood Guides</h2>
    <p>Not sure where to stay? We've created neighborhood guides for cities all around the world.</p>
    <div class="row">
      <div class="col-md-4">
        <div class="thumbnail">
          <img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/World-Beautiful-places-Paris-HD-Wallpapers.jpg">
        </div>
        <div class="thumbnail">
          <img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/World-Beautiful-places-Desktop-HD-Wallpapers.jpg">
        </div>
      </div>
      <div class="col-md-4">
        <div class="thumbnail">
          <img src="http://www.wallpapers-web.com/data/out/28/3948828-beautiful-places-wallpapers.jpg">
        </div>
        <div class="thumbnail">
          <img src="https://s-media-cache-ak0.pinimg.com/originals/50/d5/22/50d52265980da137e18d3f85a5d9290e.jpg">
        </div>
      </div>
      <div class="col-md-4">
        <div class="thumbnail">
          <img src="http://swiss7.com/wp-content/uploads/2015/07/Top-20-safest-countries-in-the-world-for-solo-travelers.jpg">
        </div>
        <div class="thumbnail">
          <img src="http://www.hd-wallpaper1.com/images/abandoned-place.jpeg">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="learn-more">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h3>Travel</h3>
        <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
        <p><a href="#">See how to travel on Airbnb</a></p>
      </div>
      <div class="col-md-4">
        <h3>Host</h3>
        <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
        <p><a href="#">Learn more about hosting</a></p>
      </div>
      <div class="col-md-4">
        <h3>Trust and Safety</h3>
        <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
        <p><a href="#">Learn about trust at Airbnb</a></p>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
  $('#myCarousel').carousel({
    interval: 5000
  })
</script>

</html>

最佳答案

试试这个，只是为 .nav img 添加了样式 left:0;右:0；边距:自动；

.neighborhood-guides {
  background-color: #efefef;
  border-bottom: 1px solid #dbdbdb;
}

.neighborhood-guides h2 {
  color: #393c3d;
  font-size: 24px;
}

.neighborhood-guides p {
  margin-bottom: 13px;
  font-size: 15px;
}

.nav {
  height: 160px;
}

.nav  img{
  position: absolute;
  height: 150px;
  display: block;
  left: 0;
  right: 0;
  margin: auto;
}

.nav a {
  text-decoration: none;
  border: 1px solid black;
  border-radius: 10px;
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 4px;
  text-transform: uppercase;
}

.nav a:hover {
  background: #efefef;
}

.nav li {
  display: inline;
  margin-right: 15px;
}

.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
  position: absolute;
  text-align: left;
}

.carousel-caption h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.carousel-caption p {
  font-size: 20px;
  color: #fff;
}

.carousel-caption a {
  font-size: 20px;
  color: orange;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}
<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
    
  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul class="pull-left">
          <li><a href="#">Home</a></li>
          <li><a href="#">all</a></li>
        </ul>
        <img src="http://shoppiz.ga/img/cms/logoblack.png" class="img-responsive">
        <ul class="pull-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </div>
	
    <div id="myCarousel" class="carousel slide">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://hdwall.us/wallpaper_1920x1080/sun_cherry_blossoms_trees_flowers_desktop_1920x1080_hd-wallpaper-1194807.jpg" class="img-responsive">
          <div class="carousel-caption">
            <h1>Find a place to stay.</h1>
            <p>Rent from people in over 34,000 cities and 192 countries.</p>
            <a href="#">Learn More</a>
          </div>
        </div>
        <div class="item">
          <img src="http://xinature.com/wp-content/uploads/2016/10/forests-view-trees-sunlight-landscape-nature-sun-tree-sunrasy-sunrise-splendor-lovely-sunset-beautiful-woods-forest-magic-peaceful-rays-beauty-sky-hd-backgrounds-1920x1080.jpg" class="img-responsive">
          <div class="carousel-caption">
            <h1>Find a place to stay.</h1>
            <p>Rent from people in over 34,000 cities and 192 countries.</p>
            <a href="#">Learn More</a>
          </div>
        </div>
        <div class="item">
          <img src="https://wallpaperscraft.com/image/belgium_winter_garden_sun_sky_clearly_trees_60892_1920x1080.jpg" class="img-responsive">
          <div class="carousel-caption">
            <h1>Find a place to stay.</h1>
            <p>Rent from people in over 34,000 cities and 192 countries.</p>
            <a href="#">Learn More</a>
          </div>
        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
          <span class="icon-prev"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
          <span class="icon-next"></span>
        </a>
      </div>
    </div>
	
    <div class="neighborhood-guides">
      <div class="container">
        <h2>Neighborhood Guides</h2>
        <p>Not sure where to stay? We've created neighborhood guides for cities all around the world.</p>
        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/World-Beautiful-places-Paris-HD-Wallpapers.jpg">
            </div>
            <div class="thumbnail">
              <img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/World-Beautiful-places-Desktop-HD-Wallpapers.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="http://www.wallpapers-web.com/data/out/28/3948828-beautiful-places-wallpapers.jpg">
            </div>
            <div class="thumbnail">
              <img src="https://s-media-cache-ak0.pinimg.com/originals/50/d5/22/50d52265980da137e18d3f85a5d9290e.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="http://swiss7.com/wp-content/uploads/2015/07/Top-20-safest-countries-in-the-world-for-solo-travelers.jpg">
            </div>
            <div class="thumbnail">
              <img src="http://www.hd-wallpaper1.com/images/abandoned-place.jpeg">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="learn-more">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <h3>Travel</h3>
            <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
            <p><a href="#">See how to travel on Airbnb</a></p>
          </div>
          <div class="col-md-4">
            <h3>Host</h3>
            <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
            <p><a href="#">Learn more about hosting</a></p>
          </div>
          <div class="col-md-4">
            <h3>Trust and Safety</h3>
            <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
            <p><a href="#">Learn about trust at Airbnb</a></p>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script> $('#myCarousel').carousel({ interval: 5000 }) </script>
</html>

关于html - 导航栏问题中的居中 Logo ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43464525/

上一篇：css - Bootstrap 菜单下拉动画点击

下一篇：html - 无法访问元素 margin-left

相关文章：

html - CSS - 字体粗细属性不是必需的吗？

html - "display:none"是否使控件无效？

html - 如何在导航中将右边框居中？

javascript - html 溢出 :hidden within dropdown-menu

javascript - HTML5 视频标签在移动设备上不起作用

html - 使消息出现在屏幕中间

javascript - Accordion 内容的固定按钮

javascript - 定义导航列表的样式规则(css)

css - 无法将 margin-top 设置为菜单 div

html - 如何让网站的内容居中？

©2024 IT工具网  联系我们