响应式图像对齐中心引导3

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

当前回答

2021.09来自一个项目:

                    <div class="d-flex" style="height: 60px; width: 60px;">
                            <img alt="ddd" src="myurl" class="m-auto"/>
                    </div>

2021-09-11 11:56:31

其他回答

2021.09来自一个项目:

                    <div class="d-flex" style="height: 60px; width: 60px;">
                            <img alt="ddd" src="myurl" class="m-auto"/>
                    </div>

2021-09-11 11:56:31

要添加到已经给出的答案，将img-responsive与img-thumbnail结合使用将把display: block设置为display: inline block。

2013-11-08 12:22:49

你可以通过定义margin: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="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> </div> </div> </div> </body> </html>

2016-07-14 12:34:19

尝试这段代码，它将工作的小图标也与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>

2016-11-23 16:18:50

试试这个:

.img-responsive { 显示:块; 高度:汽车; max-width: 100%; 保证金:0汽车; ｝ .Image { 背景:# ccc; 填充:30 px; ｝ < div class = "图像" > <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique"> < / div >

2017-08-02 10:10:42

响应式图像对齐中心引导3

推荐文章

最新文章

标签