Question

我的div在IE中没有正确居中，它在Firefox中运行良好。

我尝试过关注此网站：http://flumpcakes.co.uk/css/center-div-ie但容器div显示在IE的右侧。

<div id="topbar">
  <div id="previous"> &#171; {block:PreviousPage} {/block:PreviousPage} </div>
  <div id="next"> {block:NextPage} {/block:NextPage} &#187; </div>
</div>

<div id="container">

  <div id="header">

    <div id="logo">
      Title here please
    </div>

    <div id="tagline">
      So, why do arrays start from zero?
    </div>

    <div id="topmenu" class="toplinks">
      Home <a href="/archive">Archive</a> Ask Me Archive Random
    </div>

    <div id="search">
      <form action="/search" method="get">
        <input type="text" name="q" value="" id="" />
      </form>
    </div>   


  </div>


  <div id="posts-container">

    <div id="posts">
      Lorem ipsum dolor sit amet, post content goes here
    </div>

    <div id="leftmenu">
      <div id="date" >
        23rd November 2010
      </div>

      <div id="posttitle">
        This is a title and it contains all that you may need...
      </div>
      <i>- Filed under Misc -<i>

    </div>

  </div>



</div>

css：

body
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-family:Georgia,"Times New Roman",Serif;
    font-size: 14px;
    text-align:center;
}


#topbar
{
    height: 25px;
    background: #030303;
    min-width: 900px;
    width: 100%;
}

#container
{
    width: 800px;
    margin:0 auto;
    text-align:center;
}

#header
{
    height: 140px;
    width: 800px;
}

#logo
{
    font-size: 40px;
    font-weight: bold;
    margin-left: 0px;
    margin-top: 45px;
    position: absolute;
}

#tagline
{
    font-size: 14px;
    font-style: italic;
    margin-top: 89px;
    padding: 5px;
    position: absolute;
}

#topmenu
{
    margin-top: 45px;
    position: absolute;
    text-align: right;
    margin-left: 500px;
}

#search
{
    margin-top: 62px;
    position: absolute;
    text-align: right;
    margin-left: 570px; 
    float: right;
}


#next
{
    color: #ffffff;
    text-align: right;
    width: 350px;
    padding:3px;
    float: right;
}

#previous
{
    color: #ffffff;
    text-align: left;
    width: 350px;
    padding:3px;
    float: left; 
    margin-left: 0px;
    padding-left: 0px; 
}

#posts-container
{
    width: 800px;
    text-align: center;
}

#posts
{
    width: 613px;
    margin-left:177px;
    position: absolute;
    padding-left: 3px;
    text-align: left;

}

#leftmenu
{
    width:175px;
    text-align: right;
    margin-left: 0px;
}

#posttitle
{
    font-size: 18px;
    font-weight: bold;
    text-align: right;
    padding: 3px;
    margin-left: 5px;
}

#date
{
    background: #d4ff40;
    width: 165px;
    height: 14px;
    text-align: center;
    padding: 4px;
    color: #7c9c2d;
    margin: 5 auto;
    font-size: 11px;
}

Answer 1

我的div在IE中没有正确居中，它在Firefox中运行良好

我不会尝试解析我脑海中的HTML和CSS（感谢工作链接），但很可能是你处于Quirks模式。

添加Doctype that triggers standards mode。

Answer 2

从text-align:center;，body和#container

中删除#posts-container

以div为中心的div

2 个答案: