css图⽚居中,通过纯css实现图⽚居中的多种实现⽅法
在⽹页布局中,图⽂排版是我们常⽤的,那么经常会遇到如何让图⽚居中显⽰呢,这篇⽂章将总结常⽤css实现图⽚居中的⽅法总结:html结构:
1 <div class="demo" >
2 <img src="default.jpg" width="400" height="300"/>
3 </div>
实现img位于外层div的居中显⽰,⽹上有很多在img外层嵌各式各样的span、div、li等等,以便于使⽤ text-align来进⾏居中,当然我们不推荐嵌套多层。
⽅法⼀:
1 .demo img{
2 display: block;
3 margin:150px auto;
4 }
思路:<img>标签是属于内联元素,内联元素是不⽀持 Margin 属性,通过 Display 属性将img强制为块元素的⽅式显⽰,便可在图⽂混排中使得图⽚可以居中。
⽅法⼆:
1 .demo{
2 text-align: center;
3 }
4 .demo img{
5 margin-top:150px;
6 }
思路:利⽤text-align属性将图⽚⽔平居中,然后设置padding-top的值使其垂直居中。
⽅法三:
1 .demo img{
2 padding:150px 200px;
3 }
思路:只⽤padding属性,通过计算求得居中
⽅式四:
1 .demo{
2 display:table-cell; text-align:center; vertical-align:middle;
3 }
4 .demo img{
5 vertical-align: middle;
6 }
思路:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签,使⽤它可以让⼤⼩不固定元素垂直居中。只是它⽐上⾯⽅法优势。
⽅法五:
1 .demo{
2 position: relative;
3 }
4 .demo img{
5 position: absolute;top:150px;left:200px;
6 }
思路:通过相对,绝对定义,计算偏移量实现居中
⽅法六:
1 .demo{
2 display: -webkit-flex;
3 display: flex;
4 -webkit-align-items: center;
5 align-items: center;
6 -webkit-justify-content: center;
7 justify-content: center;
8 }
css实现垂直水平居中思路:实现css6的flex属性,很简单的实现了居中显⽰,但是推荐使⽤于web App,低版本浏览器存在⼀定兼容问题,好处和⽅法五⼀样。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论