<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<style>
body {
padding-top:40px;
}
[class*="panel-body"]{
min-height: 250px;
}
.glyphicon {
font-size:60px;
}
.section-desc {
font-family: 'Open Sans Condensed', sans-serif;
font-size:30px;
}
.section-padding-mobile {
padding-right:10%;
padding-left:10%;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<section>
<div class="navbar-header">
<a href="/" class="navbar-brand">WA Nexus</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">About</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Create</a></li>
<li><a href="">Videos</a></li>
</ul>
<a href="/login/" class="btn btn-info navbar-btn navbar-right">Sign In</a>
</div>
</section>
</div>
</nav>
<div class="jumbotron col-lg-12">
<div class="container">
<div class="row">
<h1>A Center For Worship Team<br />Planning And Scheduling</h1>
<a href="/create/" class="btn btn-info">It's Free, Sign Up</a>
</div>
</div>
</div>
<div class="container">
<section>
<div class="col-sm-4">
<div class="panel panel-default panel-info">
<div class="panel-body text-center">
<img src="/images/venues.png" />
<h4>Mobility</h4>
<p>WA Nexus was built on the idea of being on the go. You can setup any venue or worship setlist on your phone or tablet.</p>
<p><a href="">read more</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default panel-info">
<div class="panel-body text-center">
<img src="/images/setlists.png" />
<h4>Teams and Venues</h4>
<p>We understand that trying to manage multiple bands for several venues can be a little tricky. We make it as easy as possible for you.</p>
<p><a href="">read more</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default panel-info">
<div class="panel-body text-center">
<img src="/images/members.png" />
<h4>Members</h4>
<p>Members are vital to your church and service. You can assign each member to particular venues and setlists to make it easier for them.</p>
<p><a href="">read more</a></p>
</div>
</div>
</div>
</section>
</div>
<div class="container">
<section>
<div class="text-center">
<i class="glyphicon glyphicon-menu-down text-center"></i>
</div>
</section>
</div>
<div class="container">
<section>
<div class="page-header text-center" id="mobility">
<h2>Manage Worship With Mobility</h2>
</div>
<div class="row">
<div class="text-center section-padding-mobile">
<img class="img-responsive" src="/images/mobility.png" />
<p class="section-desc">We built WA Nexus from the ground up to be as optimized for mobile as it can be. In fact we thought of mobility first before anything. One of the greatest things we pride ourselves on is anything you can do on a desktop you can do on a mobile phone or tablet. We designed our system to match any need with any device.</p>
</div>
</div>
</section>
</div>
<div class="container">
<section>
<div class="text-center">
<i class="glyphicon glyphicon-menu-down text-center"></i>
</div>
</section>
</div>
<div class="container">
<section>
<div class="page-header text-center" id="mobility">
<h2>Manage Worship Teams and Venues</h2>
</div>
<div class="row">
<div class="text-center section-padding-mobile">
<img class="img-responsive" src="/images/managebility.png" />
<p class="section-desc">We understand that managing multiple services, members and venues takes time, we strive to make that as easy as possible for you. Our system makes it so easy for you to quickly add, remove and assign members to particular venues and setlists with just a few clicks. As well you can assign members to particular venues to make it easier for them to know their assignments.</p>
</div>
</div>
</section>
</div>
<div class="container">
<section>
<div class="text-center">
<i class="glyphicon glyphicon-menu-down text-center"></i>
</div>
</section>
</div>
<div class="container">
<section>
<div class="page-header text-center" id="mobility">
<h2>Your Team Members Are Vital</h2>
</div>
<div class="row">
<div class="text-center section-padding-mobile">
<img class="img-responsive" src="/images/musicians.png" />
<p class="section-desc">Team members are what make your service run, making it as easy as possible for them is what we do. Our system was built to make it as easy to understand for the simple man. When users log into their portal they are given a screen with just what they need. Why cloud their screen with so many options. You have the power to assign user rights for almost anything in WA Nexus.</p>
</div>
</div>
</section>
</div>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
当我将class="img-responsive应用于<img> text-center时，<p>不再适用于图像。它在img-responsive仍然与中心对齐时左对齐。似乎可以弄明白为什么。
如果我移除{{1}}，图像将对齐回中心。
答案 0 :(得分：-1)
img responsive有默认的css到uncenter和img。如果您将图像中心或中心块添加到图像父级，它将再次起作用