水平对齐在 Internet Explorer 中无法正常工作答案

【问题标题】：Horizontal align not working properly in Internet explorer水平对齐在 Internet Explorer 中无法正常工作
【发布时间】：2015-04-27 15:00:38
【问题描述】：

我正在尝试使用位置垂直对齐 div。它适用于除 Internet Explorer 之外的所有浏览器。在 Internet Explorer 中，.nav-group 左对齐。我该如何解决这个问题。

JS Fiddle

HTML：

<div class="container">
<div class="nav-group">// Content</div>
</div>

CSS：

.container
{
  width: 100%;
  position: relative;
}
.nav-group
{
  display: table;
  background-color: red;
  margin: auto;
  width: 200px;
  height: 100px;
  position: absolute;
  bottom: 50px;
  left:0;
  right:0;
}

【问题讨论】：

你试过 margin:0 auto 吗？
@Amit，没有运气。
你能创建一个演示吗？
jsfiddle.net/0nqu2gog
我认为如果您将display:table; 更改为display:table-cell; 它可能会起作用。

标签： html css internet-explorer

【解决方案1】：

将 display:table 更改为 display:inline。

    .nav-group   { display:inline}

Demo

【讨论】：

【解决方案2】：

希望对您有所帮助Link

css:

.container {
    width: 100%;
    display:table;
}
.nav-group {
    display: table-cell;
    background-color: red;
    margin: auto;
    width: 200px;
    height: 100px;
    position: absolute;
    bottom: 50px;
    left:0;
    right:0;
}

【讨论】：

【解决方案3】：

您使用绝对定位这一事实正在影响您的布局。您可以选择更改绝对定位并使用margin:0 auto。或更改您为元素提供的显示。

Fiddle

【讨论】：

【解决方案4】：

将display:table; 更改为display:block;

或

删除display:table; 也起作用

SEE DEMO

.nav-group
{
  display: block;
  background-color: red;
  margin: auto;
  width: 200px;
  height: 100px;
  position: absolute;
  bottom: 50px;
  left:0;
  right:0;
}

【讨论】：

显示：表是必须的。

【解决方案5】：

您将Position:absolute 和margin:auto 用于可能无法正常工作的同一个div。所以我这样修改：Updated Demo

.container {
    width: 100%;
    text-align:center;
}
.nav-group {
    display:table;
    background-color: red;
    width: 200px;
    height: 100px;
    position: absolute;
    bottom: 50px;
    left:50%;
    margin-left:-100px;
    right:0;
}

你可以在这里使用display:table;它不会影响任何东西..

我在 IE 10、最新版本的 firefox 和 chrome 中进行了测试。它运行良好..

【讨论】：

我需要 display:table;强制性的。