我有部分我有缩略图，但我在创建缩略图时遇到了问题。但它向左对齐我希望它们居中并且我不希望它们之间有太多间距。
我不知道该怎么做。我尝试过但失败了。我是新手。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
ExampleWebsite1
</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>
.thumbnail
{
margin-bottom: 20px;
margin-top:60px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
height: 370px;
width: 290px;
text-align: center;
float: none;
display: inline-block;
background-color: #8F4747;
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#"><img class="img-responsive" src="D:\Image\nyuralsimage.png"></a>
<div class="nav-collapse collapse">
<ul class="nav pull-right" id="top-nav">
<!--<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#section1">STUDIO<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Team</a></li>
<li><a href="#">Clients</a></li>
</ul>
</li>-->
<li><a href="#section5">HOME</a></li>
<li><a href="#section1">STUDIO</a></li>
<li><a href="#section2">SERVICES</a></li>
<li><a href="#section3">CONTACT</a></li>
<li><a href="#section4">SOCIAL CONNECT</a></li>
</ul>
</div>
</div>
</div>
</nav>
<section class="block" id="section5">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="D:/Image/slide1copy.jpg" alt="Slide1" />
</div>
<div class="item">
<img src="http://lorempixel.com/1024/750" alt="Slide2" />
</div>
<div class="item">
<img src="D:/Image/slide3copy.jpg" alt="Slide3" />
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">></a>
</div>
</section>
<hr>
<section class="block" id="section1">
<!--<h1 align="center"><span>Studio</span></h1>-->
<div class="container">
<p align="center" style="color:#ffffff;">Nyurals is the brainchild of young enthusiasts who aim at using technology in making life simple for you and us. </p>
</div>
<h1 align="center"><span>Now</span></h1>
<div class="container">
<p align="center" style="color:#ffffff;">Today, we work within the App ecosystem by constantly creating fresh new apps based on the Android/ iOS/ HTML5 platform. We strive to identify gaps in your day to day process and create mobile solutions that utilize the power of available technology to fulfill these unmet needs.</p>
<p align="center" style="color:#ffffff;">Our aim is to help people interact with newer technology trends to improve their efficiency and productivity while on the go. We support the out of the office and BYOD (Bring Your Own Device) concept and encourage taking it to the next level. Talking to a Smartphone in many ways provides a plethora of options to keep one entertained and all geared up for another new day. We endeavor at enabling you to create some magic and fun with your finger tips.</p>
</div>
<h1 align="center" ><span>Then</span></h1>
<div class="container">
<p align="center" style="color:#ffffff;">Our principle is based on, the adaptation to ever changing technology and innovation trends. We are constantly working towards expanding our services to develop solutions to any new technology which may arise in the future. You never know, at some point we could even be just writing on the walls virtually, and if that technology develops we aim to be at the forefront of it.</p>
</div>
<h1 align="center"><span>The Adrenaline Rush</span></h1>
<div class="container">
<p align="center" style="color:#ffffff;">We focus on being the one in the many and not the many in the many. Innovation and ever emerging trends in technology keeps us going with the anxiety and curiosity of what may be possible tomorrow.</p>
</div>
</section>
<hr>
<div id="section2">
<h1 align="center"><span>SERVICES</span></h1>
<div id="tab" class="btn-group" data-toggle="buttons-radio">
<a href="#services" class="btn btn-large btn-info active" data-toggle="tab" style="margin-top: 40px;">Services</a>
<a href="#valueadds" class="btn btn-large btn-info" data-toggle="tab" style="margin-top: 40px;">ValueAdds</a>
</div>
<div id="tab-content">
<div class="tab-pane active" id="services">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<h3 align="center" style="color: #ffffff;">Design</h3>
<p align="center" style="color: #ffffff;">We believe that if your design and logical flow is right nothing can go wrong. Our team emphasizes on prototyping and wireframing your product before actual development. Our repeated cycles of UX/ UI review ensure you have a fantastic product delivered.</p>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<h3 align="center" style="color: #ffffff;">Development</h3>
<p align="center" style="color: #ffffff;">We build, enhance and nuture your idea to an end product. Be it a Native Android/ iOS apps or a multiplatform HTMT5/ CSS3 app, we collaborate to get the best product to attract your customers. In a world with a mix of old school and innovations we also support website and portal designs to support your business needs. </p>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<h3 align="center" style="color: #ffffff;">Consultancy Services</h3>
<p align="center" style="color: #ffffff;">We consult you in various stages of your business setup to assist you in some homework related to feasibility studies, market potential, digital marketing strategies, usage analytics, competitor analytics etc. </p>
</div>
</li>
</ul>
</div>
</div>
<div class="tab-pane" id="valueadds">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<h3 align="center" style="color: #ffffff;">Customer Value</h3>
<p align="center" style="color: #ffffff;">We meet, collaborate and establish continued relations with all our clients. For us, your product deliverable is not our only promise, we also ensure that you are inolved in progress reports, iterative product reviews, customer satisfaction metrics and other insights to our process during the development of your product. Are consultancy services also provide you suggestions or guidance related to product concepts and strategies.</p>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<h3 align="center" style="color: #ffffff;">Methodology</h3>
<p align="center" style="color: #ffffff;">Long gone are the days of the SDLC. Currently, everything is quick and changing. We adhere to the Agile project management methodology as it has proven to provide a quick turnaround and satisfaction to all our customers in the past. </p>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<h3 align="center" style="color: #ffffff;">Research Label</h3>
<p align="center" style="color: #ffffff;">Nothing remains constant. With this in mind we are constantly researching the new trends in technology and via POCs mapping this technology to our inhouse out of the box ideas.</p>
</div>
</li>
</ul>
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins.js">
</script>
<script src="js/main.js">
</script>
</body>
</html>
谢谢。
最佳答案
老问题了，但是如果你把一个容器放在一个 row-fluid 中，它会使内容居中。这是我为居中缩略图所做的。
<div class="row-fluid">
<div class="span8 offset2 content">
<div class="container">
<ul class="thumbnails">
<li>
<a href="img/gallery-01.jpg" class="thumbnail lightbox_trigger">
<img src="img/gallery-01-tb.jpg"/>
</a>
</li>
<li>
<a href="img/gallery-02.jpg" class="thumbnail lightbox_trigger">
<img src="img/gallery-02-tb.jpg"/>
</a>
</li>
<li>
<a href="img/gallery-03.jpg" class="thumbnail lightbox_trigger">
<img src="img/gallery-03-tb.jpg" />
</a>
</li>
</ul>
</div>
</div>
</div>
关于html - 缩略图不会在 twitter bootstrap 2.3.2 中居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20282727/