試圖通過CSS將圖片置於頁面頂部

我通常能夠通過一些試驗和錯誤（或者我認爲的）來解決簡單的CSS問題。但我一整天都在努力，沒有運氣。在這一點上，我不知道該怎麼做。試圖通過CSS將圖片置於頁面頂部

我想將圖片置於頁面頂部。我也在使用模板，默認情況下有文本。我想我可以用圖像替換標題文本，它會很好。我錯了。

爲了更好地瞭解我在做什麼，下面是一個github模板的圖片。我所指的部分是「樣品名稱」：https://gyazo.com/89d3c00988ce270845b0fe67b55ee5f3

頁眉的代碼如下所示：

<!DOCTYPE html> 
<html lang="en-us"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Sample Title by Somebody</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen"> 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen"> 
    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen"> 
    </head> 
    <body> 
    <section class="page-header"> 
     <h1 class="project-name">Sample Title</h1> 
     <h2 class="project-tagline"></h2> 
     <a href="" class="btn">View on GitHub</a> 
     <a href="" class="btn">Download .zip</a> 
     <a href="" class="btn">Download .tar.gz</a> 
    </section>

爲標題部分的樣式表如下所示（項目名稱部分似乎雖然可以與樣品標題部分）：

.page-header { 
    color: #fff; 
    text-align: center; 
    background-color: #159957; 
    background-image: linear-gradient(120deg, #155799, #159957); } 

@media screen and (min-width: 64em) { 
    .page-header { 
    padding: 5rem 6rem; } } 

@media screen and (min-width: 42em) and (max-width: 64em) { 
    .page-header { 
    padding: 3rem 4rem; } } 

@media screen and (max-width: 42em) { 
    .page-header { 
    padding: 2rem 1rem; } } 

.project-name { 
    margin-top: 0; 
    margin-bottom: 0.1rem; } 

@media screen and (min-width: 64em) { 
    .project-name { 
    font-size: 3.25rem; } } 

@media screen and (min-width: 42em) and (max-width: 64em) { 
    .project-name { 
    font-size: 2.25rem; } } 

@media screen and (max-width: 42em) { 
    .project-name { 
    font-size: 1.75rem; } } 

.project-tagline { 
    margin-bottom: 2rem; 
    font-weight: normal; 
    opacity: 0.7; } 

@media screen and (min-width: 64em) { 
    .project-tagline { 
    font-size: 1.25rem; } } 

@media screen and (min-width: 42em) and (max-width: 64em) { 
    .project-tagline { 
    font-size: 1.15rem; } }

我已經試過，我知道的一切，試圖中心，在那裏樣本標題文字是沒有運氣的圖片（小標誌）。我嘗試了50％和自動，絕對位置和更改浮動邊距。我試着編輯proeject-name樣式表信息，並且給圖片一個ID並且以這種方式進行編輯。它總是在一些奇怪的位置結束，我不能得到它的工作。任何幫助將大大appriecated！

來源

2015-12-27 Voken

我看不出任何問題，它的工作！問題可能來自其他樣式表。 – Termininja

@Termininja你是什麼意思，它應該工作？像用圖片替換單詞會自動居中？不幸的是： – Voken

@Termininja這裏是所有3個樣式表https://github.com/Matt-Stam/league-gg/tree/gh-pages/stylesheets – Voken

您應該將圖像添加到您的來源是這樣的：需要

<h1 class="project-name"> 
    <img src="http://c3154802.r2.cf0.rackcdn.com/ssplogo.jpg"/> 
</h1>

沒有額外的CSS。它會將您的圖像置於頁面頂部。

src屬性應包含一個有效的URL。由於URL中不允許空格字符，因此您必須對它們進行編碼。

這不是當期的：

<img id="Statslogo" src="assets/Stats Logo2.png" width="640" height="200"/>

當期的版本：

<img id="Statslogo" src="assets/Stats%20Logo2.png" width="640" height="200"/>

來源

2015-12-27 10:36:48 Hadi290

我發誓我這麼做，它確實有些像奇怪的東西。在一定的窗口大小，它可以居中，但它真的很奇怪 – Voken

喜歡它會一直保持在右邊有時https://gyazo.com/3fc0d38ccdac22d1e8a79bbe67e7b782 – Voken

聖地獄我的所有圖像漂浮在右邊。我是一個白癡。不管怎麼說，還是要謝謝你 – Voken

試圖通過CSS將圖片置於頁面頂部

回答

相關問題