Responsive image align center bootstrap 3

前端未结

关注

 18  1015

I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. I w

相关标签:

18条回答

无人共我

2020-11-29 15:01
Just use .text-center class if you're using Bootstrap 3.
```
<div class="text-center">
    <img src="..." alt="..."/>
</div>
```
Note: This doesn't work with img-responsive
0 讨论(0)
发布评论:

提交评论
- 加载中...
隐瞒了意图╮

2020-11-29 15:01
You can still work with img-responsive without impacting other images with this style class.

You can precede this tag with the section id/ div id/class to define a order within which this img is nested. This custom img-responsive will work only in that area.

Suppose you have a HTML area defined as:
```
<section id="work"> 
    <div class="container">
        <div class="row">
            <img class="img-responsive" src="some_image.jpg">
        </div>
    </div>
</section>
```
Then, your CSS can be:
```
section#work .img-responsive{
    margin: 0 auto;
}
```
Note: This answer is in relation to the potential impact of altering img-responsive as a whole. Of course, center-block is the simplest solution.
0 讨论(0)
发布评论:

提交评论
- 加载中...

后悔当初

2020-11-29 15:01

You can fix it with defining margin:0 auto

or you can use col-md-offset also

<!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>

0 讨论(0)

醉酒成梦

2020-11-29 15:02
This should center the image and make it responsive.
```
<img src="..." class="img-responsive" style="margin:0 auto;"/>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

無奈伤痛

2020-11-29 15:06

<div class="text-align" style="text-align: center;  ">
    <img class="img-responsive" style="margin: auto;" alt="" src="images/x.png ?>">
</div>

you can try this.

0 讨论(0)

孤街浪徒

2020-11-29 15:12

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

0 讨论(0)