html5中怎么实现居中显示图片
一、首先,我们来看看css图片水平居中的方法
1、利用margin:0 auto
实现图片水平居中
html图片水平居中代码:
2、利用文本的水平居中属性text-align:center
实现图片水平居中
html图片水平居中代码:
![]()
二、我们来看看css图片垂直居中的实现方法
1、利用
line-height
实现图片垂直居中html图片垂直居中代码如下:
![]()
注意:此种方法需要注明高度才可以使用。
2、利用
table
实现图片垂直居中html图片垂直居中代码如下:
![]()
注意:此种方法是利用了table的垂直居中属性
说明:这里使用
display:table;
和display:table-cell;
来模拟table
,这种方法并不兼容IE6/IE7,IE67不支持display:table
,如果你不需要支持IE67那就可以用这种方法有一个缺点:当你设置了
display:table;
可能会改变你的原有布局3、利用
position
实现图片垂直居中html图片垂直居中代码如下:
![]()
说明:如果已知图片的宽度和高度可以用这种方法。
以上就是html5中怎么实现居中显示图片的详细内容,更多请关注毛票票其它相关文章!