IE中的响应式英雄文本

Question

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

这是一个英雄形象/背景，顶部是h1标题。

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

这在mac浏览器上非常有效，但在8-11上，文本和播放字形不会居中。

我正在使用引导程序，播放字形将启动电影。

我只是在浏览器模拟器中进行测试，任何人都可以确认文本不在中心，以及如何在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;即可识别最大宽度

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