Centered responsive text

Question

I have a jsfiddle here - http://jsfiddle.net/kw83kLmo/

It's justs a block of text that I need to center in the window.

The text needs a set width because I don't want it to be the full width of the container.

When the window gets smaller the text needs to stay in the center but get narrower.

In the example here it stays centered and responds until it get's to 600px then just stays that width.

I know I have set that width but I did that to center it

<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>

Solution 1

Edit your code like this :

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

Demo

Solution 2

Update your h1 style like below.

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

DEMO

Solution 3

Edit on your code

.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*/
}

You no need to position your element for making it unless if you need

NOTE: Remove your position:relative; from .hero

DEMO

Solution 4

I'd go with:

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

Solution 5

JSfiddle Demo

I took the positioning off the h1 and put it on the wrapping 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;
}

View more solutions