Bootstrap3图片怎么设置成居中

 剑鱼论坛 发表于 2020年03月05日 CSS/CSS3  16
剑鱼论坛
LV 5 [初中]
最后在线:4小时前
加入时间:223天前
主帖:82  跟帖:40

对于图片居中我们可以用css样式代码的“text-center”来实现,但是当我们使用前端框架Bootstrap3时,通过这个方法图片居中却会失效,没法简单用text-center来实现图片居中。

那么使用Bootstrap3时,是否有简单的方法来实现图片居中呢?

答案是有的,Bootstrap3已经为我们准备好了。我们只需要像下面的代码这样就可以实现图片居中:

<img class="center-block" src="图片地址">

以上代码的“center-block”就是用来实现图片居中的,如果我们还希望让图片能够自适应,那么可以像下面这么写:

<img class="img-responsive center-block" src="图片地址">

我们在前面的代码中加了“img-responsive”,就可以实现图片自适应了。

Bootstrap3使用确实是很简单。

发新帖
论坛主帖
140
论坛跟帖
104
在线访客
0
今日主帖
0
今日跟帖
0
今日注册
1
123
http://jianyuluntan.com/gentie.html
http://jianyuluntan.com/postzan.html
http://jianyuluntan.com/postcai.html
http://jianyuluntan.com/postshoucang.html
http://jianyuluntan.com/gentiezan.html
http://jianyuluntan.com/gentiecai.html
http://jianyuluntan.com/huifu.html
http://jianyuluntan.com/xiugai.html
http://jianyuluntan.com/shanchugentie.html
1
XzA=
1
© 2019 - 2020 剑鱼论坛 版权所有
Powered by JianYuLunTan
剑鱼论坛 976666861
http://jianyuluntan.com/feedback.html
0
http://jianyuluntan.com/adenglu.html