【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,很小,很兴奋,但使用到最后发现不兼容手机,当分辨率变化的 ...
随机推荐
- Huawei-R&S-网络工程师实验笔记20190524-VRP的系统、接口视图下基本操作
>Huawei-R&S-网络工程师实验笔记20190524-VRP的系统.接口视图下基本操作(重命名.配置IP.VLAN接口.双工模式.console口) >>实验开始,先上 ...
- BUPT2017 springtraining(16) #3 ——搜索与动态规划
题目在这里啊 A.最长上升子序列,范围很小所以写了简单的O(n^2)算法 #include <iostream> #define rep(i, j, k) for(int i = j;i ...
- 使用Eclipse 创建Spring Boot项目
一.为什么要使用 Spring Boot ? Spring Boot解决的问题 (1) Spring Boot使编码变简单 (2) Spring Boot使配置变简单 (3) Spring Boot使 ...
- JavaSE 学习笔记之StringBuffer(十五)
--< java.lang >-- StringBuffer字符串缓冲区: 构造一个其中不带字符的字符串缓冲区,初始容量为 16 个字符. 特点: 1:可以对字符串内容进行修改. 2:是一 ...
- MongoDB:更改数据库位置(Windows)
MongoDB在Windows中默认的数据库目录是c:\data.如果在没有该目录的情况下,直接运行mongod.exe,就会报如下错误: 在某些情况下,我们并不想把mongoDB的数据库放在c盘,这 ...
- 一键免费升级Windows 10
2015年3月18日,在深圳召开的微软Windows硬件project产业创新峰会(WinHEC)发布了一些震撼消息. 微软计划于今年夏天正式推出Windows 10操作系统.将在190个国家发布,总 ...
- linux 进程通信之 共享内存
共享内存是被多个进程共享的一部分物理内存.共享内存是进程间共享数据的一种最快的方法.一个进程向共享内存区域写入了数据,共享这个内存区域的全部进程就能够立马看到当中的内容. 关于共享内存使用的API k ...
- 【struts2】中method={1}具体解释
我们在使用struts2的时候,有时候为了简化struts2的配置项而採用通配符的方式,例如以下代码: <action name="ajaxregister!*" class ...
- 设计模式学习–Decorator
What Decorator:动态地给一个对象加入一些额外的职责. 就添加功能来说.Decorator模式相比生成子类更加灵活. Why Decorator模式适用于能够动态的给对象增删职责.比方qq ...
- 学习笔记——WPF
WPF,Windows Presentation Foundation.主要作用在于界面呈现,但Presentation却是介绍的意思. WPF采用XAML + 代码相结合的方式,感觉跟ASP.NET ...