HTML中如何设置多种形式的图片居中效果
导读：这篇文章给大家分享的是“HTML中如何设置多种形式的图片居中效果”，文中的讲解内容简单清晰，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下“HTML中如何设置多种形式的图片居中效果”吧。...
这篇文章给大家分享的是“HTML中如何设置多种形式的图片居中效果”，文中的讲解内容简单清晰，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下“HTML中如何设置多种形式的图片居中效果”吧。图片居中方法：1、利用“margin:0 auto”实现水平居中；2、利用“text-align:center”实现水平居中；3、利用line-height实现垂直居中；4、利用table实现垂直居中；5、利用position实现垂直居中。
本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。
一、首先，我们来看看css图片水平居中的方法
1、利用margin:0 auto实现图片水平居中
html图片水平居中代码：
div style="text-align:center;
width:500px;
border:greensolid1px;
">
img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&
fm=26&
gp=0.jpg" style="margin:0 auto;
"/>
/div>
2、利用文本的水平居中属性text-align:center实现图片水平居中
html图片水平居中代码：
div>
div style="text-align:center;
width:500px;
border:greensolid1px;
">
img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&
fm=26&
gp=0.jpg" style="display:inline-block;
"/>
/div>
二、我们来看看css图片垂直居中的实现方法
1、利用line-height实现图片垂直居中
html图片垂直居中代码如下：
div style="text-align:center;
width:500px;
height:200px;
line-height:200px;
border:greensolid1px;
">
img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&
fm=26&
gp=0.jpg" style="display:inline-block;
vertical-align:middle;
"/>
/div>
注意：此种方法需要注明高度才可以使用。
2、利用table实现图片垂直居中
html图片垂直居中代码如下：
div style="text-align:center;
width:500px;
height:200px;
display:table;
border:greensolid1px;
">
span style="display:table-cell;
vertical-align:middle;
">
img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&
fm=26&
gp=0.jpg" style="display:inline-block;
"/>
/span>
/div>
注意：此种方法是利用了table的垂直居中属性
说明：这里使用display:table;
和display:table-cell;
来模拟table，这种方法并不兼容IE6/IE7，IE67不支持display:table，如果你不需要支持IE67那就可以用
这种方法有一个缺点：当你设置了display:table;
可能会改变你的原有布局
3、利用position实现图片垂直居中
html图片垂直居中代码如下：
div style="width:500px;
height:200px;
position:relative;
border:greensolid1px;
">
img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&
fm=26&
gp=0.jpg" style="width:120px;
height:40px;
position:absolute;
left:50%;
top:50%;
margin-left:-60px;
margin-top:-20px;
"/>
/div>
说明：如果已知图片的宽度和高度可以用这种方法。
以上就是关于“HTML中如何设置多种形式的图片居中效果”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML中如何设置多种形式的图片居中效果
本文地址： https://pptw.com/jishu/654981.html