Div显示在错误的位置

Question

我有这样的代码：

<div style="position:relative">
    <div style="float:left; width: 183px; background-color:#c1cba9; color: #000000;"><img border="0" alt="Product categories" title="Product categories" src="http://www.gvcdigital.co.uk/images/graphic/categrieshead.png" width="179" height="43"><br />
        <div style="margin-left: 10;"><ul><li><a href="/Digi-Spot/Sound-Vision-/_i.html?_sacat=293&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Sound &amp; Vision</a><span class="cnt"> (9943)</span></li><ul class="lev2"><li><a href="/Digi-Spot/TV-Home-Audio-Accessories-/_i.html?_sacat=14961&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">TV &amp; Home Audio Accessories</a><span class="cnt"> (4056)</span></li><li><a href="/Digi-Spot/Performance-DJ-Equipment-/_i.html?_sacat=48458&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Performance &amp; DJ Equipment</a><span class="cnt"> (1893)</span></li><li><a href="/Digi-Spot/Multipurpose-Batteries-Power-/_i.html?_sacat=48446&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Multipurpose Batteries &amp; Power</a><span class="cnt"> (1571)</span></li></ul><li class="morelnk"><a href="/Digi-Spot/Sound-Vision-/_i.html?_sacat=293&amp;_sasi=1&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">more...</a></li><li><a href="/Digi-Spot/Business-Office-Industrial-/_i.html?_sacat=12576&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Business, Office &amp; Industrial</a><span class="cnt"> (2530)</span></li><ul class="lev2"><li><a href="/Digi-Spot/Building-Materials-Supplies-/_i.html?_sacat=41498&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Building Materials &amp; Supplies</a><span class="cnt"> (2168)</span></li><li><a href="/Digi-Spot/Electrical-Test-Equipment-/_i.html?_sacat=92074&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Electrical &amp; Test Equipment</a><span class="cnt"> (107)</span></li><li><a href="/Digi-Spot/Industrial-Tools-/_i.html?_sacat=64808&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Industrial Tools</a><span class="cnt"> (92)</span></li></ul><li class="morelnk"><a href="/Digi-Spot/Business-Office-Industrial-/_i.html?_sacat=12576&amp;_sasi=1&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">more...</a></li><li><a href="/Digi-Spot/Computers-Tablets-Networking-/_i.html?_sacat=58058&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Computers/Tabl&#8203;ets &amp; Networking</a><span class="cnt"> (1655)</span></li><ul class="lev2"><li><a href="/Digi-Spot/Cables-Connectors-/_i.html?_sacat=31491&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Cables &amp; Connectors</a><span class="cnt"> (1328)</span></li><li><a href="/Digi-Spot/Laptop-Desktop-Accessories-/_i.html?_sacat=31530&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Laptop &amp; Desktop Accessories</a><span class="cnt"> (262)</span></li><li><a href="/Digi-Spot/Other-Computing-Networking-/_i.html?_sacat=162&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">Other Computing &amp; Networking</a><span class="cnt"> (33)</span></li></ul><li class="morelnk"><a href="/Digi-Spot/Computers-Tablets-Networking-/_i.html?_sacat=58058&amp;_sasi=1&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">more...</a></li></ul><div class="link"><br><a href="/Digi-Spot/_i.html?_sasi=1&amp;_sid=560455030&amp;_trksid=p4634.c0.m322">See all items in the store</a></div></div><br />
        <img border="0" src="http://www.gvcdigital.co.uk/images/graphic/catbot.png" width="179" height="17"></div>
    <div style="float:left; width: 480px; height:100px; text-align: center; background-color:#d6d6a4;"><img border="0" src="http://www.gvcdigital.co.uk/images/graphic/description.png" width="232" height="81"><br /><div style="text-align: left; margin-left: 10;">[[Description]]</div></div>
    <div style="float:left; width: 324px; height:100px; text-align: center; ">
        <div style="width: 324px; color: #ffffff; background-color:#6b8861; background-color:#d6d6a4;font-size : 34px;">[[Title]]</div>
        <div style="width: 324px; color: #ffffff; background-color:#6b8861;"><div style="width: 320px; margin: 2 2 2 2; background-color:#ffffff;">[[Picture1]]</div><div style="width: 300px; height: 2px; background-color:#6b8861; color: #6b8861;"></div></div>
        <div style="width: 324px; color: #801010; font-size : 40px; background-color:#d6d6a4;">Price: [[BuyItNowPrice]]</div>
    </div>
</div>

<div style="clear: both; text-aling: center; width:985px;"><img border="0" src="graphic/buttom.png" width="524" height="42"></div>

结果看起来像这样：

可能是什么问题？我希望红色div中标记的位于底部的中心。

Answer 1

将margin: 0 auto添加到该div：

<div style="clear: both; text-align: center; width:985px; margin: 0 auto;"><img border="0" src="graphic/buttom.png" width="524" height="42"></div>

Answer 2

在最后一个div中，您有text-aling: center而不是text-align: center。

Answer 3

添加保证金：0自动;到那个标记的div。

Answer 4

您已将text-aling:center设为text-align:center。修复它你会得到图像位于div的中心。要将div本身居中，请将margin: 0 auto添加到该div

演示：http://jsfiddle.net/8p7A2/1/同时添加了固定文本对齐和边距。