首页 文章

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

提问于
浏览 次
396

我使用Bootstrap 3进行目录 . 当在平板电脑上显示时，产品图像看起来很丑，因为它们的尺寸很小（500x500），浏览器的宽度为767像素 . 我想把图像放在屏幕的中央，但出于某种原因，我不能 . 谁将帮助解决问题？

enter image description here

html css image twitter-bootstrap alignment

16 回答

  • 536

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

    // Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}
    回复于
  • 6

    您可以使用定义边距修复它：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>
    回复于
  • 1113

    如果您使用的是Bootstrap 3，只需使用 .text-center 类 .

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

    注意：这不适用于img-responsive

    回复于
  • 2

    这应该使图像居中并使其响应 .

    <img src="..." class="img-responsive" style="margin:0 auto;"/>
    回复于
  • 96

    使用标准类应用于所有Booostrap对象的更精确的方法是不设置顶部和底部边距（因为图像可以从父级继承这些），所以我总是使用：

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

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

    回复于
  • 0

    到目前为止，接受的最佳解决方案似乎是 <img class="center-block" ... /> . 但没有人提到 center-block 如何运作 .

    以Bootstrap v3.3.6为例：

    .center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

    <img> 的默认值 dispaly 是 inline . 值 block 将元素显示为块元素（如 <p> ） . 它从一条新线开始，占据整个宽度 . 这样，两个边距设置可使图像水平居中 .

    回复于
  • 0

    只需将所有图像缩略图放在行/ col div中，如下所示：

    <div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>

    一切都会好起来的！

    回复于
  • 3

    Twitter Bootstrap 3中有.center-block类（自v3.0.1起），因此使用：

    <img src="..." alt="..." class="img-responsive center-block" />
    回复于
  • 0

    您仍然可以使用 img-responsive 而不会影响此样式类的其他图像 .

    您可以在此标记的前面加上section 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 是最简单的解决方案 .

    回复于
  • 0

    试试这个：

    .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>
    回复于
  • 3

    试试这个代码它也适用于带有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>
    回复于
  • 10

    如果您使用的是Bootstrap v3.0.1或更高版本，则应使用this solution . 它不具有自定义CSS的样式，而是使用Bootstrap功能 .

    我的原始答案如下所示

    这是一个非常简单的解决方案 . 因为Bootstrap中的 .img-responsive 已设置 display: block ，所以可以使用 margin: 0 auto 来居中图像：

    .product .img-responsive {
    margin: 0 auto;
}
    回复于
  • 1
    <div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

    .

    <style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>
    回复于
  • 31

    仅将类 center-block 添加到图像中，这也适用于Bootstrap 4：

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

    注意：即使使用 img-responsive ， center-block 也能正常工作

    回复于
  • 2
    @media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
    回复于
  • 2

    要添加已经给出的答案，将 img-responsive 与 img-thumbnail 组合将 display: block 设置为 display: inline block .

    回复于

相关问题