2014-10-30 80 views
0

我剛剛作出了一個HTML頁面的代碼HTML頁面問題

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>RLGaming</title> 
<style type="text/css"> 
body { 
    text-align: center; 
    background-color: #000000; 
    width: 1600px; 
    margin: 0px auto; 
    padding: 20px; 
    /*border: 1px solid black;*/ 


} 
</style> 
</head> 

<body> 
<img src="test/SplashPageFinished.png" alt="" width="1600" height="1400" usemap="#Map" style=""/> 
<map name="Map"> 
    <area shape="rect" coords="333,447,596,907" href=> 
    <area shape="rect" coords="673,447,938,908" href=> 
    <area shape="rect" coords="1002,446,1267,907" href=> 
    <area shape="rect" coords="752,1019,801,1039" href=> 
    <area shape="rect" coords="487,60,1092,355" href=> 
</map> 
</body> 
</html> 

的問題是,當我在我的電腦本地運行此HTML文件它就會在屏幕上居中。但是,當我上傳到我的虛擬主機並加載它不再居中在屏幕上。如何使它居中? 網頁是:http://rlgaming-wow.co.uk

+1

嘗試在兩個測試中使用CTRL-F5。 – 2014-10-30 14:06:49

+1

你能發佈一個鏈接到你的頁面嗎? – Dropout 2014-10-30 14:06:51

+0

<地圖名稱=「地圖」> .....
Monah 2014-10-30 14:09:49

回答

1

嘗試彈性盒!這是真正容易的中心的東西:)

#wrapper{ 

    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: flex; 

    justify-content: center; 
    -ms-flex-pack: center; 
    align-items: center; 
    -ms-flex-align: center; 
    -webkit-box-align: center; 
} 
+0

我沒有運行css。所有在HTML文件中與CSS無關。 – user3913519 2014-10-30 14:19:08

+0

將此代碼放在您的樣式塊上。 – vyscond 2014-10-30 14:26:40

+0

它的工作,但失去了背景色 – user3913519 2014-10-30 14:33:35

0

使用您的包裝ID作爲主容器,並給它的寬度,然後應用自動保證金。

代碼

#Wrapper{ 
width: 1600px; 
margin: 0px auto; 
padding: 20px; 
} 

我想你也一定要試試重置在你的頁面的CSS,可以幫助你。

每個瀏覽器都有自己的默認「用戶代理」樣式表。重置樣式表的目標是減少瀏覽器在缺省行高,標題頁邊距和字體大小等方面的不一致性。

復位CSS:

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
+0

我沒有運行css。所有在HTML文件中與CSS無關。 – user3913519 2014-10-30 14:18:36

+0

這是什麼意思'不運行CSS'。爲了呈現你需要使用CSS的頁面。 – 2014-10-30 14:22:25

+0

它只是在這個簡單的index.html文件上運行。 – user3913519 2014-10-30 14:23:32