html - IE 中的居中响应英雄文本

Question

我这里有一个 jsfiddle - http://jsfiddle.net/3ffjn3sm/1/

这是一张主图/背景，顶部有一个 h1 标题。

文本需要居中并具有最大宽度，但在调整窗口大小时会缩小。

这在 mac 浏览器上运行完美，但在 ie 8-11 上文本和播放字形不居中。

我正在使用 bootstrap，播放字形将开始播放电影。

我只在浏览器模拟器中测试，任何人都可以确认文本没有居中以及我如何在 ie 中做到这一点。

<div class="hero">

    <div class="hero_heading text-center">
        <h1>This is the hero heading This is the hero heading</h1>

        <span class="glyphicon glyphicon-play" data-toggle="modal" data-target="#myModal"></span>

    </div>

</div>

Answer 1

Demo

只需添加 width: 100% 和 max-width: 600px; 让 IE 识别最大宽度

.hero_heading{
    position: absolute;
    left: 0; top: 20px; right: 0;
    margin:auto;
    max-width: 600px;
    width: 100%; /* add this */
}