Question

我的html（css inside）代码如下所示：

<body style="color: #25670c; margin: 0 0 0 0; padding: 0 0 0 0; font-family : Times New Roman; font-size : 14px; text-align: center;">


<div style="height: 96px; width: 985px;"><a href="www.one.lt">
    <img border="0" src="images/graphic/header.png" width="985" height="96" alt="header" title="DigiSpot eBay store" /></a></div>
<div style="height: 41px; width: 985px;">
    <img border="0" src="/images/graphic/meniu.png" alt="DigiSpot meniu" width="985" height="41" usemap="#mapas" />

<map name="mapas">
  <area shape="rect" coords="56,0,0,41" href="www.one.lt" alt="DigiSpot eBay store home" title="DigiSpot eBay store home">
  <area shape="rect" coords="539,0,400,41" href="www.one.lt" alt="About Digispot" title="About DigiSpot">
  <area shape="rect" coords="699,0,539,41" href="www.one.lt" alt="Delivery information" title="Delivery information">
  <area shape="rect" coords="845,0,699,41" href="www.one.lt" alt="Returns information" title="Returns information">
    <area shape="rect" coords="985,0,845,41" href="www.one.lt" alt="Contacts information" title="Contacts information">
</map> </div>

<div style="position:relative">
    <div style="float:left; width: 663px; height:100px; text-align: center; background-color:#d6d6a4;"><img border="0" src="/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; 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-align: center; width:985px; margin: 0 auto;"><img border="0" src="graphic/buttom.png" width="524" height="42"></div>

</body>

结果不是我想要的，看起来像这样： enter image description here Bigger image on push here

以下是有问题的区域： enter image description here Bigger image on push here

我希望所有这个页面都与中心对齐，我在正文文本中对齐，但它没有帮助。
右边的div应该在页面底部的中心，我不知道为什么他选择这样的位置，图像的某些部分是在“Price”div下。
是否可以在左边和正确的价格中进行描述div，而其他信息div总是具有相同的高度而不是固定的，因为我希望那些div的背景在底部没有分开。

编辑：推送图片以使其更大。

Answer 1

删除您想要居中的每个元素的float:left。然后将margin: 0 auto添加到您想要居中的每个元素。

编辑：并尝试学习如何设置非内联元素的样式。它会让你的生活更轻松。

Answer 2

查看此演示： http://jsbin.com/uhakak/7/edit

首先，您应该将所有内容包装到一个div中，这将使其位于中心位置：

和css for it：

#mainContent {
  width:945px;
  margin:0 auto;
}

通过这种方式，您可以将所有内容放在页面的中心。 text-align：center仅适用于文本（内联元素，实际上文本只是内联元素的单独案例）。 Div是块元素，text-align：center不会影响它们。

二。不确定为什么你在右侧有这个div，但是尝试用postion:relative添加隐藏到你的div的溢出，其中包含描述，标题和价格。我觉得没问题。

第三，让两个div具有相同的高度是有点棘手的，但是由于你的观点是简单的背景颜色，你可以为父div设置背景。溢出：隐藏（实际上，因为我可以看到位置：根本不需要相对）。上面的演示应该显示它是如何工作的。我删除了身高：100px;有

Answer 3

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #mypage{margin: 0 auto;
                width: 950px;}
            .main{margin: 0 auto;
                text-align: center;}
            .desc{width: 700px;    
                background-color:#d6d6a4;
                float: left;}
            .text{float: right;}
        </style>
    </head>    
    <body id="mypage">
        <div class="main">
            <div class="header">
                <a href="www.one.lt"><img src="http://www.gvcdigital.co.uk/images/graphic/header.png" alt="header" title="DigiSpot eBay store"></a>
            </div>
            <div class="menu">
                <img src="http://www.gvcdigital.co.uk/images/graphic/meniu.png" alt="DigiSpot meniu" usemap="#mapas"/>
            </div>
            <div class="desc">
                <img src="http://www.gvcdigital.co.uk/images/graphic/description.png">
            </div>
            <div class="text">[[Description]]</div><br> 
            <div class="text">[[Title]]</div><br>
            <div class="text">[[Picture1]]</div><br>
            <div class="text">Price: [[BuyItNowPrice]]</div>            
            <img src="graphic/buttom.png">
        </div>
    </body>
</html>

Div显示在错误的位置，高度

3 个答案: