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

Answer 2

修改代码

.hero_heading h1{
    border: 1px solid red;
    color: white;
    //top: 0; left: 0; bottom: 0; right: 0;
    width: 600px;/*added*/
    max-width:80%;/*to leave spaces around your text on responsive*/
    margin:auto;/*changed*/
}

除非你需要

，否则你无需定位你的元素

注意：从position:relative;

中删除.hero

<强> DEMO

Answer 3

像这样编辑你的代码：

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

Demo

Answer 4

JSfiddle Demo

我从h1取出定位并将其放在包装div上。

<强> CSS

.hero{
  background-image: url(http://placehold.it/800x300);  
  background-size: cover;
  position: relative;
  height: 400px;
}

.hero_heading {
    border: 1px solid red;
    color: white;
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    max-width: 600px;
}

Answer 5

我会选择：

.hero_heading{
    border: 1px solid red;
    color: white;
    position: absolute;
    width:50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);        
    transform: translate(-50%, -50%);
}

Answer 6

CSS flex可以在包括IE在内的大多数流行浏览器中以兼容的方式为您提供魔力。看一下这个JSFiddle

.hero{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    background-image: url(http://placehold.it/800x300);  
    background-size: cover;
    height: 400px;
}

.hero_heading h1{
    border: 1px solid red;
    color: white;
    max-width: 600px;
}

居中的响应文本

6 个答案: