css图片居中显示,如何让图片在div内水平居中?

  • 时间:2019-02-21 01:41
  • 来源:本站原创
  • 作者:Mr.PAN
  • 阅读:417
css图片居中显示,如何让图片在div内水平居中?。居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中、垂直居中和水平垂直居中。今天就给大家讲一下三种中的水平居中。

居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中、垂直居中和水平垂直居中。今天就给大家讲一下三种中的水平居中。

css图片水平居中显示方法一:

利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 

代码如下:

<div style="text-align: center; width: 500px; border: green solid 1px;">
    <img src="https://panxu.net/upload/content/20190124/1548344025603966.png" style="margin: 0 auto;" />
</div>

css图片水平居中显示方法二:

利用文本的水平居中属性text-align: center

代码如下:

<div style="text-align: center; width: 500px; border: green solid 1px;">
    <img src="https://panxu.net/upload/content/20190124/1548344025603966.png" style="display: inline-block;" />
</div>

以上就是关于“css图片居中显示,如何让图片在div内水平居中”的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流。