我设法将徽标放在更大的显示屏中心。但是当尺寸从768px（例如767px）降低时。徽标和导航有点混乱。
非常感谢任何形式的帮助。
.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>
答案 0 :(得分：0)
试试这个，只为.nav img left:0; right:0; margin: auto;
.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>