为什么图像不居中？

Question

<div id="tagcontainer"><img id="tagimg" src="img/tri.png"/></div>

CSS：

#tagcontainer {
    width:100%;
    top:0;
    position:absolute;
}
    #tagimg {
        position:relative;
        margin:auto;
    }

不知道为什么我无法理解。为什么这个图像不居中？

Answer 1

因为<img>是内联元素。而是在容器上使用text-align: center。

Answer 2

将#tagimg设为块级元素{display：inline-block;或者在父...上使用text-align center

Answer 3

试试这个：

#tagcontainer {
width:100%;
position:absolute;
}
#tagimg {
width:[imagewidth]px;
top:0;
position:relative;
margin:auto;
}

Answer 4

再添加一个css属性display:block;

    #tagimg {
        display:block;
        position:relative;
        margin:auto;
    }