温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS html图片水平垂直居中的方法有哪些

发布时间:2022-03-16 17:19:47 来源:亿速云 阅读:716 作者:iii 栏目:web开发

今天小编给大家分享一下CSS html图片水平垂直居中的方法有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

  1、text-align:center实现图片水平居中

  text-align一般用于文本的水平居中,也可以用于图片,代码如下:

  CSS部分:

  <styletype="text/css">

  div{

  text-align:center;

  width:500px;

  border:greensolid1px;

  }

  </style>

  HTML部分:

  <div>

  <imgsrc="img/logo.png"/>

  </div>

  效果图:

  图片垂直居中1.jpg

  2、line-height和text-align:center实现图片的水平垂直居中

  设置line-height的值等于height,可以实现垂直居中,text-align:center可以实现水平居中。HTML部分一样,CSS代码如下:

  <styletype="text/css">

  div{

  text-align:center;

  width:400px;

  height:200px;

  line-height:200px;

  border:greensolid1px;

  }

  img{

  vertical-align:middle;

  }

  </style>

  效果图:

  图片垂直居中3.jpg

  3、display:table和display:table-cell实现图片水平垂直居中

  利用table方法设置display:table,display:table-cell,但是这种方法并不兼容IE6/IE7,如果你不需要支持IE67可以使用这种方法

  css样式直接写在标签里面,代码如下:

  <divstyle="text-align:center;width:400px;height:200px;display:table;border:greensolid1px;">

  <spanstyle="display:table-cell;vertical-align:middle;">

  <imgsrc="img/logo.png"/>

  </span>

  </div>

  4、position实现图片水平垂直居中

  定位方法:在父盒子中设置相对定位,在子盒子中设置绝对定位,即所谓的父相对子绝对。设置图片位置左边为50%,上边为50%,(注意:这样并没有垂直居中),还需要设置margin-left为图片长度的一半,margin-top为图片高度的一半。HTML部分一样,CSS代码如下;

  <styletype="text/css">

  div{

  width:400px;

  height:200px;

  position:relative;

  border:greensolid1px;

  }

  img{

  width:200px;

  height:50px;

  position:absolute;

  left:50%;

  top:50%;

  margin-left:-100px;

  margin-top:-25px;

  }

  </style>

  5、背景background实现图片水平垂直居中

  利用background:urlno-repeatcentercenter实现图片的水平垂直居中

  div{

  width:400px;

  height:200px;

  border:greensolid1px;

  background:url(img/logo.png)no-repeatcentercenter;

  }

以上就是“CSS html图片水平垂直居中的方法有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI