响应式图像alignment中心引导3

我使用Bootstrap 3做目录。当在平板电脑上显示时,产品图像看起来很丑,因为它们的尺寸很小(500×500),浏览器的宽度是767像素。 我想把图像放在屏幕的中心,但由于某种原因,我不能。 谁会帮助解决问题?

在这里输入图像说明

如果您使用的是Bootstrap v3.0.1或更高版本,则应该使用此解决scheme 。 它不会覆盖自定义CSS的Bootstrap样式,而是使用Bootstrapfunction。

我的原始答案如下所示为后代


这是一个愉快的简单的修复。 因为Bootstrap的.img-responsive已经设置了display: block ,所以可以使用margin: 0 auto来居中显示图像:

 .product .img-responsive { margin: 0 auto; } 

在Twitter Bootstrap 3( 自v3.0.1以来 )中有.center-block类,所以使用:

 <img src="..." alt="..." class="img-responsive center-block" /> 

只将类center-block添加到图像,这也适用于Bootstrap 4:

 <img src="..." alt="..." class="center-block" /> 

注意:使用img-responsive时, center-block不起作用

如果您使用Bootstrap 3,只需使用.text-center类。

 <div class="text-center"> <img src="..." alt="..."/> </div> 

注意:这不适用于img-responsive

我会build议一个更“抽象”的分类。 添加一个新的类“img-center”,可以与.img-responsive类结合使用:

 // Center responsive images .img-responsive.img-center { margin: 0 auto; } 

这应该使图像居中,并使其响应。

 <img src="..." class="img-responsive" style="margin:0 auto;"/> 

您仍然可以使用img-responsive而不会影响其他图像。

你可以在这个标签前加上id / div id / class来定义这个img嵌套的顺序。 这个自定义的img-responsive只能在那个区域工作。

假设你有一个HTML区域定义为:

 <section id="work"> <div class="container"> <div class="row"> <img class="img-responsive" src="some_image.jpg"> </div> </div> </section> 

那么,你的CSS可以是:

 section#work .img-responsive{ margin: 0 auto; } 

注意:这个答案与改变整个img-responsive的潜在影响有关。 当然, center-block是最简单的解决scheme。

 @media (max-width: 767px) { img { display: table; margin: 0 auto; } } 

为了增加已经给出的答案,将img-responsiveimg-thumbnail结合起来将设置display: blockdisplay: inline block

 <div class="col-md-12 text-center"> <img class="img-responsive tocenter" /> </div> 

 <style> .tocenter { margin:0 auto; display: inline; } </style> 

试试这个代码它也能用于小图标bootstrap 4,因为没有中心块类是bootstrap 4,所以尝试这个方法,这将是有益的。 您可以通过将.col-md-12.col-md-8.col-md-4来更改图像的位置,这取决于您。

 <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-xs-center text-lg-center"> <img src="" class="img-thumbnail"> </div> </div> </div> </div> 

尝试这个:

 .img-responsive{ display: block; height: auto; max-width: 100%; margin:0 auto; } .Image{ background:#ccc; padding:30px; } 
 <div class="Image"> <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique"> </div> 

您可以通过定义边距来修复它:0 auto

或者也可以使用col-md-offset

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <style> .img-responsive{ margin:0 auto; } </style> <body> <div class="container"> <h2>Image</h2> <div class="row"> <div class="col-md-12"> <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p> <img src="bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> </div> </div> </div> </body> </html> 

应用于所有使用标准类的Booostrap对象的更准确的方法是不设置顶部和底部边距(因为图像可以从父类inheritance),所以我总是使用:

 .text-center .img-responsive { margin-left: auto; margin-right: auto; } 

我也做了一个要点,所以如果有任何更改将适用于任何错误,更新版本将始终在这里: https : //gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66