【问题标题】:Page not centering in IE7IE7页面不居中
【发布时间】:2013-03-02 06:01:58
【问题描述】:

在 Safari 中运行良好,但在 IE7 中它左对齐。 http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=160653524585#ht_500wt_1372

有什么办法让它也以 IE 为中心?谢谢

.container {
width:980px;
background-position: center;
padding: 0;
margin: auto;
font-family: "Trebuchet MS";
font-size: 12px;
}


</style>
</head>
<body>
<div class="container">

<div class="clear">dfgfdg</div>

</div>

编辑:

有人也有 eBay 帐户来进行测试吗?我知道厚脸皮,但我相信很多人都会受益!

编辑 2:

这段代码仍然渲染到左边,真的很烦,因为它可以做到:

.wrapper 
{
margin: 0 auto 0 auto;
width: 980px;
text-align: center;
}


.container
{
width: 100%;
text-align: left;
}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<div class="wrapper">
<div class="container">
your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.
</div>
</div>
</body>
</html>

渲染:http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=160653524585#ht_500wt_1156

eBay 上的居中页面示例:http://stores.ebay.co.uk/Argos-Outlet(已检查代码,似乎使用了与下面建议的代码相同的代码,但仍然无法使其正常工作。

【问题讨论】:

  • 如果您没有背景图片,则不需要背景位置。它没有达到您的预期。
  • eBay 链接与此有什么关系?您只是想提高该项目的点击率吗?
  • 埃文,起初我也持怀疑态度。但是,如果您低头查看“完整描述”区域,您会注意到凯利正试图将这些元素放置在该描述的中心。

标签: html css internet-explorer-7 alignment center


【解决方案1】:

解决方案: http://jsfiddle.net/vonkly/GweVX/


CSS

.container {
    width: 100%;
    padding: 10px 0; /* have some north + south padding */
    background-color: #feefee; /* enter your background color */
}
.aligner {
    display: block;
    width: 980px;
    margin: 0 auto; /* centers this element */
    text-align: center; /* centers the text */
}

HTML

<div class="container">
    <div class="aligner">
        Lorem ipsum dolar sit amet, amet sit dolar ipsum lorem.
    </div><!-- /aligner -->
</div><!-- /container -->

【讨论】:

  • 非常感谢,我试过了,但没有这样的运气。!真正的问题可能与 eBay 的 iframe 有关?更新链接:cgi.ebay.co.uk/ws/…
【解决方案2】:

你应该能够做到这一点:

.clear{
    text-align:center;
}

当我将 IE9 置于 IE7 模式时对我有用。 (没办法在真正的IE7上测试。)

【讨论】:

  • 谢谢,但文本需要在 div 中左对齐?
【解决方案3】:
.center {
    position: absolute:
    margin-left: -490px;
    left: 50%;
}

<div class="center">&nbsp;</div>

这也使 DIV 居中

【讨论】:

  • 这听起来很有希望,直到我再次失败。我想我可能很快就会在这个上面挂上旗帜..cgi.ebay.co.uk/ws/…“测试 2”。请问最后的想法??!
【解决方案4】:

你可以用这个把你的 div 包起来:

.wrapper 
{
margin: 0 auto 0 auto;
width: 980px;
text-align: center;
}

.container
{
width: 100%;
text-align: left;
}

然后html会变成这样:

<div class="wrapper">
  <div class="container">
    your content here.
  </div>
</div>

【讨论】:

  • 由于 IE 无法读取margin,为了能够将 div 定位在中心,请改用text-align: center;
  • 干杯,请参阅本页顶部的编辑 2 以获取回复。
  • 把它添加到你的
【解决方案5】:

margin: auto; 更改为margin: 0 auto 0 auto;

要使文本左对齐,请输入text-align: left;

【讨论】:

  • 干杯,请参阅上面的编辑 2
猜你喜欢
  • 2010-11-07
  • 1970-01-01
  • 1970-01-01
  • 2014-12-01
  • 2011-01-17
  • 1970-01-01
  • 1970-01-01
  • 2012-04-27
  • 2010-11-17
相关资源
最近更新 更多