【问题标题】:Center image above text in bootstrap在引导程序中将图像居中放置在文本上方
【发布时间】:2014-08-17 15:46:55
【问题描述】:

我正在尝试制作网站的主页。 我想要三个下面有文本的图像,但图像不在文本上方居中。这是 jsFiddle。

JsFiddle

 <div class="row" style="text-align:center">

            <div class="col-md-4 col-xs-8">
                 <img src="http://s27.postimg.org/5emjkk14v/image.jpg" class="img-responsive" style="height:180px;width:180px;" />
                <h4> Vaccinations</h4>
                <p>Dogs and cats are susceptible to a variety of illnesses that can be completely prevented by following the appropriate vaccination schedule.</p>

            </div>
            <div class="col-md-4 col-xs-8">
                <img src="http://s27.postimg.org/5emjkk14v/image.jpg" class="img-responsive" style="height:180px;width:180px;" />
                <h4>Checkups</h4>
                <p>Regular checkups are a key factor in pet wellness, and can often unearth problems that could lead to health issues down the road.  </p>

            </div>
            <div class="col-md-4 col-xs-8">
                  <img src="http://s27.postimg.org/5emjkk14v/image.jpg" class="img-responsive" style="height:180px;width:180px;" />
                <h4> Senior Pets</h4>
                <p>Senior pets generally require more medical attention than their younger counterparts, just as senior humans do. So when is a pet considered “senior”? </p>

            </div>

        </div>

【问题讨论】:

    标签: html twitter-bootstrap center


    【解决方案1】:

    需要将图片的左右边距设置为自动

    .col-md-4.col-xs-8 img {
      margin: 0 auto;
    }
    

    更新JSFIDDLE

    【讨论】:

      【解决方案2】:
      .img-responsive{display:inline-block}
      

      【讨论】:

      • 这段代码是关于什么的?您应该简要介绍您建议的解决方案!
      • 很简单就是解决这个问题。在他的小提琴中,他正在使用 Bootstrap,它对图像响应具有 img-responsive.. 但是该类也有 display:block 导致确切的问题。我相信任何在 Bootstrap 框架方面有经验的人都会遇到这种情况至少一次。所以不需要太多解释。只需覆盖 img 响应式显示即可。
      猜你喜欢
      • 2017-07-04
      • 2015-09-16
      • 1970-01-01
      • 2021-12-12
      • 2014-10-09
      • 1970-01-01
      • 2017-06-17
      相关资源
      最近更新 更多