我们在用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 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

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

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

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

  3. bootstrap中如何让响应式图片(img-responsive)水平居中

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

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

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

  5. 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

    □ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...

  6. 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容

    在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...

  7. 使用Bootstrap 3开发响应式网站实践02,轮播

    本篇体验图片轮播.html部分为: <div class="carousel slide" id="myCarousel" > <!--Ind ...

  8. 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

    "使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...

  9. 响应式图片菜单式轮播,兼容手机,平板,PC

    昨天在给自己用bootstrap写一个响应式主业模版时想用一个图片轮播js,看到了bootstrap里面的unslider.js,只有1.7k,很小,很兴奋,但使用到最后发现不兼容手机,当分辨率变化的 ...

随机推荐

  1. JSTL 实现 为Select赋多个值

    需要注意需要在.jsp文件中引入相应的类库 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core ...

  2. noip模拟赛 同余方程组

    分析:这道题一个一个枚举都能有70分...... 前60分可以用中国剩余定理搞一搞.然而并没有枚举分数高......考虑怎么省去不必要的枚举,每次跳都只跳a的倍数,这样对前面的式子没有影响,为了使得这 ...

  3. Markdown 基本使用

    My First Markdown 标签(空格分隔): 未分类 # Markdown 11种基本语法## 设置标题在此输入正文标题设置(让字体变大,和word的标题意思一样)在Markdown当中设置 ...

  4. 使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框

    这也是下拉列表太长了之后,使用的同事提出来的意见, 然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦, 就找了几个JQUERY的插件测试了一下,最后选中了flexsel ...

  5. 欢聚时代校园招聘java开发一面经历

    收到yy短信通知笔试通过后隔天就一面了,面试时间是下午1点半,跟另外一个同学在1点半的时候已经到了目的酒店,发现面试都集中在一个大厅,摆了非常多桌椅,由不同的面试关在面试.等到2点多的时候才到我.先说 ...

  6. ExtJs 日期相加,Grid表格列可编辑

    1.日期相加: Ext.Date.add(new Date(), Ext.Date.DAY, 15) 2.Grid表格列可编辑: {    header : "实际已交货量",   ...

  7. jabberNet 发送出席信息

    没代码我说个J8: public void Presence(User.EStatus status) { string statustxt = ""; //说明文字.比如,离开的 ...

  8. win7下code::blocks开发环境

    一.环境配置步骤: 下载安装code::blocks; 下载安装MinGW; 在complier settings中, Toolchain executables选择MinGW的安装路径. 完成安装. ...

  9. Linux下使用popen()执行shell命令【转】

    本文转载自:https://my.oschina.net/u/727148/blog/262987 函数原型: #include “stdio.h” FILE popen( const char co ...

  10. leetcode数学相关

    目录 166分数到小数 169/229求众数 238除自身以外数组的乘积 69Sqrt(x) 求平方根 231Power of Two 166分数到小数 给定两个整数,分别表示分数的分子 numera ...