我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐。

一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片。如果需要实现响应式图片水平居中,那么我们要使用 .center-block 类

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

Ps:上述代码中,我们一定要注意.center-block 类的添加位置,一定要把 .center-block 添加到img中,如果添加到别的地方,那么不会实现响应式图片水平居中,比如,如下的代码就不能实现响应式图片水平居中。

<p  class="center-block"><img class="img-responsive" src="..." /></p>  我是错误的,不能实现图片居中。

bootstrap中如何让响应式图片(img-responsive)水平居中的更多相关文章

  1. 【Bootstrap】如何让响应式图片(img-responsive)水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...

  2. 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  3. 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  4. bootstrap快速入门笔记(八)-按钮,响应式图片

    一,默认样式:.btn-default , .btn-primary , .btn-success  ,.btn-info, btn-warning ,btn-link 二,尺寸:.btn-lg, . ...

  5. html中的响应式图片

    html中的响应式图片 img sizes 指定屏幕尺寸 srcset 指定可以使用的图片和大小,多个使用逗号分隔,需要指定图片的真实宽度,个人觉得没有picture好用 <img sizes= ...

  6. 利用Bootstrap快速搭建个人响应式主页(附演示+源码)

    1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...

  7. bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. web响应式图片设计实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  9. 继续送假期干货——响应式图片工具smartImg

    中午看<众妙之门>看到一个响应式图片处理工具(点此查看)的介绍,然后就心血来潮想着不妨自己写一个基于JQ的吧,于是就又有了这么一个干货给大家. smartImg 的全部文件可以从我的Git ...

随机推荐

  1. win7下matlab2016a配置vlfeat

    1.下载vlfeat http://www.vlfeat.org/ 2.解压到了matlab安装目录的toolbox下 3.打开vs2013的这个 4.输入nmake version  查看我的版本是 ...

  2. C语言-两个库函数

    两个库函数 --1-- printf函数 1.1 printf 函数的介绍 1.2 格式控制字符串 1.3 %f输出精度的问题 1.4 printf 函数使用注意事项 --2-- scanf函数 2. ...

  3. Oracle数据库基础

    Oracle基础知识 Oracle的主要特点 1.支持多用户.大事务量的事务处理 2.在保持数据安全性和完整性方面性能的优越 3.支持分布式数据处理.将分布在不同物理位置的数据库用通信网络连接起来,在 ...

  4. 【ASM C/C++】 Makefile 规则说明

    make 命令会自动读取当前目录下的 Makefile 文件[31],完成相应的编译步骤.Makefile 由一组规则(Rule)组成,每条规则的格式是:target ... : prerequisi ...

  5. 进军Linux

    大二的时候学习Java,学完Java SE之后就放弃了这条道路,踏上了嵌入式之路.那时候约定好,选择了DSP,从C2000开始学起,基础仅仅是会C51,有C语言和Java的基础.这几年随着项目的需求变 ...

  6. 4W1T教程1 如何使用幻灯片

    第一步,读取类别为xxXX前五张幻灯片 <!-- 幻灯片循环开始-->{section name=banner loop=$banner} <li data-transition=& ...

  7. 今天谈谈流,什么是IO流?

    无标题 (5) :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { bord ...

  8. CSS样式表(二)

    [layout] clear:该属性的值指出了不允许有浮动对象的边. 默认值:none none: 允许两边都可以有浮动对象 both: 不允许有浮动对象 left: 不允许左边有浮动对象 right ...

  9. 微信小程序-位置坐标

    wx.getLocation(OBJECT) 获取当前的地理位置.速度. OBJECT参数说明: success返回参数说明: 示例代码: wx.getLocation({ type: 'wgs84' ...

  10. js设计模式总结-迭代器模式

    迭代器模式 要解决的问题 迭代器要解决的问题很简单很单纯,就是进行遍历操作. 实现原理 基本所有语言都实现了迭代器,javascript也不例外,如Array.prototype.forEach,fo ...