html - 居中响应文本

Question

我这里有一个 jsfiddle - http://jsfiddle.net/kw83kLmo/

这只是我需要在窗口中居中的一段文本。

文本需要设置宽度，因为我不希望它是容器的全宽。

当窗口变小时，文本需要保持在中心但会变窄。

在此处的示例中，它保持居中并响应，直到达到 600px，然后才保持该宽度。

我知道我已经设置了那个宽度，但我这样做是为了让它居中

<div class="container-fluid ">

    <div class="hero">

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

    </div>

</div>

Answer 1

更新您的 h1 样式，如下所示。

.hero_heading h1 {
    border: 1px solid red;
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 600px;
}

DEMO