html - 为什么图像不居中？

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; 或在父级上使用文本对齐中心...

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;
    }