我们在用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. ASP.NET MVC5----基本用法

    由于之前在项目中也使用MVC进行开发,但是具体是那个版本就不是很清楚了,但是我觉得大体的思想是相同的,只是版本高的在版本低的基础上增加了一些更加方便操作的东西.下面是我学习ASP.NET MVC5高级 ...

  2. stack栈

    栈(statck)这种数据结构在计算机中是相当出名的.栈中的数据是先进后出的(First In Last Out, FILO).栈只有一个出口,允许新增元素(只能在栈顶上增加).移出元素(只能移出栈顶 ...

  3. python 随机生成固定长度的字串

    from random import Random#随机生成4到20位的用户名def random_username(): username = '' chars = 'AaBbCcDdEeFfGgH ...

  4. this关键字简单应用

    class PersonDemo3 { public static void main(String[] args) { Person p=new Person("张三",22); ...

  5. Flesch Reading Ease -POJ3371模拟

    Flesch Reading Ease Time Limit: 1000MS Memory Limit: 65536K Description Flesch Reading Ease, a reada ...

  6. 描述性统计分析-用脚本将统计量函数批量化&分步骤逐一写出

    计算各种描述性统计量函数脚本(myDescriptStat.R)如下: myDescriptStat <- function(x){ n <- length(x) #样本数据个数 m &l ...

  7. JS汉语转拼音脚本

    测试代码: var anhui = "安徽"; //获得全拼 pinyin.getFullChars(anhui); //获得首拼 pinyin.getCamelChars(anh ...

  8. The first DP!

    P3399 丝绸之路 题目背景 张骞于公元前138年曾历尽艰险出使过西域.加强了汉朝与西域各国的友好往来.从那以后,一队队骆驼商队在这漫长的商贸大道上行进,他们越过崇山峻岭,将中国的先进技术带向中亚. ...

  9. Java生成带小图标的二维码-google zxing 工具类

    近期一直忙于开发微信商城项目,应客户要求,要开发个有图标的二维码.经过两次改版,终于实现了该功能(第一次没有小图标,这次才整合好的),如下是完整代码 . 该代码使用Java7开发,另外使用 core- ...

  10. maven添加sqlserver的jdbc驱动包

    http://search.maven.org/中没有sqlserver的jdbc驱动,所以需要本地安装sqljdbc的jar包,然后再在pom里面引入 Step 1 在微软官网下载sqljdbc的j ...