logo标签列表

边距：在IE中自动设置无效

cssinternet-explorerinternet-explorer-9margintext-align
16

网址：http://cyberbat.co.uk/test 容器边距: 自动不起作用，是否有其他方法可以让它在IE中居中显示。

编辑：请重新检查，index.php是错误的文件，我已将其替换为index.html。

1
问题不清楚。请展示一些HTML源代码，我们不想从你的链接中寻找它...并且具体放在中间是什么？ - musefan
您只需要为.page创建一个容器，其text-align应设置为center。IE无法通过margin使块标签（例如div或ul）居中。请参见下面的答案中的代码。 - amiry jd
5
链接失效了。 - Mihai Caracostea
9个回答
24
这是IE浏览器的一个bug！你只需创建一个包含 <div class="page"> 的容器，并将其text-align设置为center即可。 

.page-holder{
    text-align:center;
}
.page{
    margin:0 auto;
}
<div class="page-holder">
    <div class="page">
    page content
    </div>
</div>

10

对于某些愚蠢的浏览器，在父容器上使用此代码：

text-align: center
9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

您的问题是定义文件类型和标准。如果您将以下代码添加到文件顶部，它将起作用！

1
我添加了HTML 5的<!DOCTYPE html>，现在IE的行为符合预期。10x - Pavel Vlasov
8
尝试在父级项目上使用以下内容。
display: flex;
align-items: center;
4
如果你只想让一个元素垂直居中，可以在父元素上使用"display: flex"，并在子元素上使用"align-self: center"。 - RustyToms
3
您的PHP代码是原始的，因为您没有正确配置服务器：
<?php
include('inc/settings.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

将 PHP 应用于 *.html 文件可以解决此问题，<?php include ?> 将不会呈现为字面值。如果我没有记错的话，请将 .ini 文件中的此行进行调整：
AddType application/x-httpd-php .html .htm .php

由于这个具体的后端代码出现在DOCTYPE之前，会导致IE进入quirks模式，在quirks模式下水平自动边距无法正常工作。您可以在父元素上使用text-align:center，但这是针对IE的一个hack，您应该通过按照我上面的建议让IE在标准模式下呈现来正确解决此问题。
3

对于IE浏览器，将"my-auto"替换为"align-self-center"即可。您还可以编写相应的CSS：

.center-container{
   align-self: center;
}
1
align-self 是一个 flexbox 属性，只有在 flexbox 容器中才能使用。 - Quangdao Nguyen
2
因为标记开头处有错误的处理指令，导致Internet Explorer以"怪异模式"显示您的网站：
<?php
include('inc/settings.php');
?>

移除它; margin: auto 可在IE6+中使用。不需要进行 text-align: center 或其他不必要的更改。

抱歉，那是 PHP 文件。请再次检查，我已经将 index.html 文件替换了 index.php 文件。 - Lewes
@Lewes 如果我打开你提供的链接，我仍然可以在源代码顶部看到 <?php ... （在浏览器中按 Ctrl+U 显示源代码）。 - duri
1
尝试在中添加一个记录：
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
这实际上比其他提到的方法更有效，可以让我的页面在IE11中以与Chrome相同的方式显示。 - Rawrcasm
0
你可以下载 normalize.css（只需谷歌一下），并将其链接到你的项目中，现在你可以使用类似以下的代码： HTML： 
    <main class="container></main>

CSS：

    .container {
      margin-left: auto;
      margin-right: auto;
      width: 600px;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接