CODEWITHSUNDEEP
htmlcss
Liondancer
Liondancer

Reputation: 16469

How to center text on top of a picture

I am not sure why my text is not centering in the middle of the page. I used margin-left and right set to auto. I am new to front end dev so I am currently having a bit of trouble. On my page, it is currently located on the left

Here is the jsFiddle: http://jsfiddle.net/o7rq7t0k/1/

HTML:

<header>
  <div class="background_image">
  </div>
  <div class="welcome-text-container">
    <div class="row">
      <h1 class="welcome-text1">Welcome!</h1>
    </div>
  </div>
</header>

CSS:

.background_image {
    background-image: image-url("header-bg.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; 
    position: absolute;
    /* (img-height / img-width * width) */
    /* (853 / 1280 * 100) */
}

.welcome-text-container {
    z-index: 100;
    position: absolute;
    padding-top: 300px;
    padding-bottom: 200px;
    /*display: block;*/
    margin-left: auto;
    margin-right: auto;
}
.row {
    padding-left: 50px;
    padding-right: 50px;
}

Upvotes: 1

Views: 46

Answers (2)

emmanuel
emmanuel

Reputation: 9615

In order to center an element in screen you have to make sure that container width is set to 100%.

.welcome-text-container { width: 100%; }

Fiddle: http://jsfiddle.net/o7rq7t0k/3/

Upvotes: 2

Jordan
Jordan

Reputation: 79

It's cause by the "position" property. Look at this jsfiddle : 

`http://jsfiddle.net/o7rq7t0k/2/`

Upvotes: 2

Related Questions