在保持當前導航欄定位的同時居中標題

爲什麼我看起來不能將我的標題居中在此頁上？我需要幫助集中我的標題，說在這個頁面上購物。我需要將它分開嗎？在保持當前導航欄定位的同時居中標題

<!DOCTYPE html> 
<html> 
<head> 
<title>EvenDoper.com</title> 
<center> 
<img src="ED1.psd" width="719" height="159" alt="ED1"> 
</center> 
<style> 
ul { 
    float: left; 
    list-style: none; 
    position: relative; 
    left: 50%; 
} 
li { 
    display: block; 
    float: left; 
    position: relative; 
    right: 65%; 
} 
li 
{ 
float:left; 
} 
a:link,a:visited 
{ 
display:block; 
width:120px; 
font-weight:bold; 
color:#00a651; 
background-color:#FFFFFF; 
text-align:center; 
padding:0px; 
text-decoration:none; 
text-transform:uppercase; 
} 
a:hover,a:active 
{ 
background-color:#FFFFFF; 
} 

h1 {color:#FFFFFF;} 
h1 {text-align:center;} 
h1 
{ 
background-color:#00a651; 
} 
</style> 
</head> 
<body> 
<ul> 
<li><a href="shop.html">&#9889;Shop</a></li> 
<li><a href="about.html">About</a></li> 
<li><a href="contact.html">Contact</a></li> 
</ul> 
</body> 
<br> 
<h1>Shop</h1> 
</html>

來源

2014-02-27 user3362170

要放置HTML元素的''標籤內。 – essmahr

嗨，起初你應該寫出正確的代碼。你的圖片屬於body-tag，它也不應該是psd。使用jpg，png或svg。 – invictus

我認爲您的大寫鎖定已損壞。問題的最後一部分不是大寫字母。 – GolezTrol

-1

這將幫助你：http://jsfiddle.net/L2nZQ/5/

但你真的應該開始學習基礎知識。

<html> 
<head> 
    <title>Your Title</title> 
    <style>Your CSS</style> 
</head> 
<body> 
    Your Code 
</body> 
</html>

這是一個很好的網站，這樣做http://www.w3schools.com/

您可以驗證此http://validator.w3.org/

來源

2014-02-27 20:37:50 invictus

我會推薦反對w3schools，因爲他們往往會弄錯很多東西，並拖延多年來修復社區指出的問題。 – TylerH

謝謝你們，我非常感謝你們的幫助，我將詳細閱讀你們提出的一些建議！ – user3362170

我建議更換w3schools鏈接。有很多更好的選擇，例如http://docs.webplatform.org/wiki/beginners或https://developer.mozilla.org/en-US/docs/Web/Guide/HTML。以下是一些關於w3schools網站的一些問題的解讀：http://www.w3fools.com/ – 3dgoo

首先你的代碼中，有很多與你的語法問題。例如，您需要將<img>代碼移動到<body>代碼中。您還需要將<h1>代碼移動到您的<body>代碼的底部。看看Mozilla的Introduction to HTML以瞭解更多關於正確的HTML語法和標記。其次，我會推薦（以及社區的其他人，很可能），對於如此多的CSS樣式，您使用外部CSS文件。看到這個JSFiddle開始改善你的代碼。訪問Mozilla的CSS developer guide瞭解關於CSS的一些非常詳細的信息。

你「商店」文本是偏離中心的原因有兩個：

一：因爲你有一些未解決的float條目進一步向上CSS。 CSS代表CascadingStyle Sheets，表示樣式級聯從上到下;順序很重要！如果你在CSS的任何一個元素中都有float，那麼你需要在clear下一個元素下來。否則，從那裏開始的所有CSS屬性將具有相同的float屬性應用於它們。

二：你沒有一個寬度爲任何你CSS屬性設置，因此該文件很可能試圖利用<img>標籤的寬度在HTML，這是719px。這基本上使「Shop」文本集中在width: 719px;上。我已經添加在上面的jsfiddle鏈接這些修補程序，但對於冗餘的緣故，這裏是CSS代碼，你應該更換你的<h1>代碼：

h1 { 
    clear: both; 
    width: 100%; 
    color: #FFFFFF; 
    text-align:center; 
    background-color:#00a651; 
}

來源

2014-02-27 20:42:36 TylerH

謝謝你們，我非常感謝我將閱讀你所提出的一些建議！ – user3362170

@ user3362170如果這個或其他答案解決了您的問題的問題，通過單擊投票計數下的複選標記可將其標記爲已接受。祝你好運！ :-) – TylerH

在保持當前導航欄定位的同時居中標題

回答

相關問題