css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

Question

如题所述

Answer 1

水平居中的话就在img所在的标签设置text-align:center
垂直居中的话就在img上设置vertical-align:middle
至于水平垂直居中？这的问题与上面的已经重复了
例如：
<div style="text-align:center; width:100px; height:40px;"><img src="图片" style="vertical-align:middle;" width="16" height="16" /></div>

Answer 2

水平居中容易
img{margin:0 auto;}
就会水平居中了，

水平垂直嘛，有很多种方法，，说说我常用的。
<div style="position:relative;width:500px;height:500px;background:#000;">
<img src="xxx.jpg" style="position:absolute;width:100px;height:100px;top:50%;left:50%;margin-top:-50px;margin-left:-50px;">
</div>本回答被提问者和网友采纳

Answer 3

由于img是个特殊的内联元素，所以要将其设置为块级元素方能让其居中显示。即display设置为block，再加上margin:0 auto，示例代码如下：

<img style="display:block;margin:0 auto" src=""/>