如何在圖片頂部放置文本

我不確定爲什麼我的文本不在頁面中間。我用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; 
}

來源

2014-11-14 Liondancer

必須定義寬度：'。歡迎文本容器{寬度：100％; }'。 – emmanuel

@emmanuel發佈一個答案我會接受它！ = D – Liondancer

爲了中心元素在屏幕上，你必須確保容器寬度設置爲100%。

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

小提琴：http://jsfiddle.net/o7rq7t0k/3/

來源

2014-11-14 07:56:07 emmanuel

它的原因的「位置」屬性。看看這個的jsfiddle：

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

來源

2014-11-14 07:55:08 Jordan

你確實解決了我遇到的另一個問題！謝謝！ – Liondancer

如何在圖片頂部放置文本

回答

相關問題