【Bootstrap】如何让响应式图片(img-responsive)水平居中
我们在用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)水平居中的更多相关文章
- 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- bootstrap中如何让响应式图片(img-responsive)水平居中
我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...
- bootstrap快速入门笔记(八)-按钮,响应式图片
一,默认样式:.btn-default , .btn-primary , .btn-success ,.btn-info, btn-warning ,btn-link 二,尺寸:.btn-lg, . ...
- 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容
□ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...
- 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容
在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...
- 使用Bootstrap 3开发响应式网站实践02,轮播
本篇体验图片轮播.html部分为: <div class="carousel slide" id="myCarousel" > <!--Ind ...
- 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等
"使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...
- 响应式图片菜单式轮播,兼容手机,平板,PC
昨天在给自己用bootstrap写一个响应式主业模版时想用一个图片轮播js,看到了bootstrap里面的unslider.js,只有1.7k,很小,很兴奋,但使用到最后发现不兼容手机,当分辨率变化的 ...
随机推荐
- 学习Spring框架等技术的方向、方法和动机
学习Spring框架最早学习Spring框架是在大二的时候,当时看了几本书,看了一些视频,主要是传智播客的.更多的,还是写代码,单独写Spring的,也有与Struts和Hibernate等框架整合的 ...
- HDU 1836 畅通工程
畅通工程 Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 18636 ...
- (38)Spring Boot分布式Session状态保存Redis【从零开始学Spring Boot】
[本文章是否对你有用以及是否有好的建议,请留言] 在使用spring boot做负载均衡的时候,多个app之间的session要保持一致,这样负载到不同的app时候,在一个app登录之后,而访问到另外 ...
- [Poj3261] [Bzoj1717] [后缀数组论文例题,USACO 2006 December Gold] Milk Patterns [后缀数组可重叠的k次最长重复子串]
和上一题(POJ1743,上一篇博客)相似,只是二分的判断条件是:是否存在一段后缀的个数不小于k #include <iostream> #include <algorithm> ...
- [Cypress] Create True end-to-end Tests with Cypress (Smoke test)
Integration tests let us keep our tests fast and reliable. They also allow us to test scenarios that ...
- Oracle 11g OEM登录后提示“出现内部错误”
使用oem登录时提示:“出现内部错误.有关详细信息, 请查看日志文件”. 具体原因未知,发现使用SQL Plus登录一次之后,再次登录即可.
- 【安卓笔记】ormlite入门
ps:写这篇文章的目的是尝试下新的markdown编辑器哈哈 简单介绍 ORMLite provides a lightweight Object Relational Mapping between ...
- AFNetworking 3.0携带參数上传文件Demo
一.服务端代码: 服务端是java用国产nutz搞的,实际mvc框架都大同小异.就是提交文件的同一时候还带了个表单參数 @AdaptBy(type=UploadAdaptor.class, args= ...
- c++ 基于Policy 的 模板编程
在没真正接触c++ 模板编程之前.真的没有想到c++ 还能够这么用.最大的感触是:太灵活了,太强大了. 最初接触模板威力还是在Delta3d中,感觉里面的模板使用实在是灵活与方便,特别是dtAI中使 ...
- Android EditText得到和失去焦点时,自定义处理内容
当android的Edittext得到/失去焦点时,需要自定义一些处理内容时,需要对EditText对象的Focus进行监听处理. 在Activity中,做以下处理: 1.取得EditText对象. ...