Как разместить текст в верхней части изображения

Question

Я не уверен, почему мой текст не центрируется в середине страницы. Я использовал margin-left и right для auto. Я новичок в интерфейсе, поэтому у меня в настоящее время немного неприятностей. На моей странице, в настоящее время она находится на левой

Вот в 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; 
} 

Answer 1

Чтобы центр элемент в экране, вы должны убедиться, что контейнер ширина устанавливается в 100%.

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

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

Answer 2

причина это в "положении" имущество. Посмотрите на этот jsfiddle:

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