【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,很小,很兴奋,但使用到最后发现不兼容手机,当分辨率变化的 ...
随机推荐
- 用 console.time()和 console.timeEnd() 测试你的 javascript 代码执行效率
无意中学习到了一种测试 javascript 代码执行效率的一种方法,就记下来便于以后使用,用到了console对象中的 time 和 timeEnd 方法 . console.time('m ...
- SVG格式图片转成HTML中SVG的Path路径
AI图标制作完成之后,保存的svg文件包含许多AI的信息,如果要在HTML中使用,我们需要在svg文件中提取/修改信息,重新保存. 1.在AI中已经完成图标,要保存SVG文件,点击“文件(File)” ...
- [HDU3038]How Many Answers Are Wrong(并查集)
传送门 和某题类似,只不过奇偶换成了和. ——代码 #include <cstdio> #include <iostream> #define N 1000001 int n, ...
- RSAROLL
题目:http://www.shiyanbar.com/ctf/1918 # -*- coding: utf-8 -*- import gmpy2 ciper = [704796792, 752211 ...
- hdu 3657 最大点权独立集变形(方格取数的变形最小割,对于最小割建图很好的题)
转载:http://blog.csdn.net/cold__v__moon/article/details/7924269 /* 这道题和方格取数2相似,是在方格取数2的基础上的变形. 方格取数2解法 ...
- Django获取当前页面的URL——小记
获取带参数URL:request.get_all_path() 获取不带参数URL:request.path 获取主机地址:request.get_host()
- CODEVS——T 1036 商务旅行
http://codevs.cn/problem/1036/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Descript ...
- sublime3设置快捷键在浏览器打开预览
我下的st3默认不能使用快捷键在浏览器打开,所以要找到源文件然后选择在浏览器打开,非常麻烦.找了很久,终于找到了一个在浏览器打开的快捷方式. 亲测有效. 1.确保你的st3已经安装了package c ...
- Notepad++支持jQuery、html5、css3
Notepad++里的代码提示文件是以XML文件存放于目录 ....\Notepad++\plugins\APIs\下的. 将这三个文件:html.xml, css.xml, javascript.x ...
- Extjs grid 设置行字体颜色
CustSuppGrid = Ext.create('Ext.grid.Panel', { title : '', // 标题头 iconCls : 'icon-grid', // 标题图标 stor ...