css - 负上边距不适用于子图像

Question

这就是我希望小鸡盒的样子:![] 1 出于某种原因，我不能使用负边距来让推特图片位于框的中心。我的亲子关系有问题吗？

我的 css 在外部工作表中，但在这里:

<style type="text/css">

#chicklet_container {
    margin:20px auto 0px auto;
    width:540px;
    height:215px;
}

#chicklet_box {
    margin:0px 0px 10px 0px;
    width:190px;
    height:160px;
    border-style:solid;
    border-width:33px 5px 5px 5px;
    border-color:#45BA88;
    position:relative;
}

#chicklet_box2 {
    margin:-30px 0px 10px 0px;
    width:190px;
    height:160px;
    border-style:solid;
    border-width:0px 0px 30px 0px;
    border-color:#3f4040;
}

#chicklet_text {
    text-align:center;
    margin:-196px 0px 0px 0px;
    color:#FFF;
    width:190px;
    font-family:"Verdana, Geneva, sans-serif";
    font-size:27px;
    line-height:20px;
}

#chicklet_text2 {
    text-align:center;
    margin:139px 0px 0px 0px;
    color:#FFF;
    width:190px;
    font-family:"Proxima, Nova, Ultralight";
    font-size:26px;
    line-height:20px;
}

#chicklet_box img {
    margin:-250px 0px auto 5px;
}
</style>

这是 html:

<div id="chicklet_container">
    <div id="chicklet_box">
        <div id="chicklet_box2">
        </div>
            <div id="chicklet_text">Follow Me</div>
            <div id="chicklet_text2">@soandsoandso</div>
            <img src="images/twitter.jpg" alt="">
    </div>
</div>

Answer 1

为什么要使用这么多边距来对齐 Twitter 鸟图像或文本。使用尽可能低的边距。相反，请尝试使用该图像 position:absolute; 和 top ,left 属性。会更干净。但是要记住一件事，如果您对元素使用绝对位置，请检查其外部元素或父元素是否已定位，如果未定位，则情况可能会变得更糟，该子元素可能会移至其他位置。