在twitter bootstrap 2.3.2中，缩略图不会出现在中心
在twitter bootstrap 2.3.2中，缩略图不会出现在中心
提问于 2013-11-29 17:47:11
我有一个部分，其中我有缩略图，但我有问题，因为我创建的缩略图非常well.But，它是对齐到左，我希望他们在中心，我不想他们之间的太多间距。
我不知道该怎么办。我试过了，但失败了。我是个新手。
下面是我的代码：
<!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>谢谢。
回答 1
Stack Overflow用户
发布于 2014-09-07 05:51:39
老问题，但是如果你把一个容器放在一个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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20282727
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号