HTML - 網頁中心的文字

-1

好的，所以我對網站開發很陌生，正在和一位朋友一起在一個新的網站上工作。到目前爲止，我已經提出了這個代碼，但由於某種原因，文本是在一個不同的線上。我如何讓這段文字沿着頁面上的一行展開？謝謝！HTML - 網頁中心的文字

代碼（HTML）

<!DOCTYPE html> 
<head> 
<link rel="stylesheet" type="text/css" href="csgositecss.css"> 
<title>CSGOCarry.com | Win Big!</title> 
<div class="center"> 
    <h1>Welcome to CSGOCarry</h1> 
</div> 

.center{ 
    position:absolute; 
    height: 50px; 
    width: 50px; 
    left:50% 
    top:50% 
} 
</head>

代碼（CSS）

body {background-image: url("csgocarryback.jpg"); background-size: 100%;} 

h1 {color:white; text-align:center; font-size:50px} 

div { 
    height: 200px; 
    width: 400px; 
    background: none; 

    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -200px; 
}

來源

2016-02-25 Matt Jones

你的HTML是無效的。內容和相關元素不能位於<head>元素內。您的CSS也需要包含在<style>標籤中。它不會被應用，除非它是。

來源

2016-02-25 19:06:39 Rob

其中之一是，HEAD標記中的CSS應該在STYLE標記中，並且DIV應該而不是必須位於HEAD部分中，它屬於BODY部分。

您的CSS .center {}將DIV的寬度設置爲50px，當然這不會將所有文本放在一行中。

這將是有效的：

<!DOCTYPE html> 
<head> 
    <link rel="stylesheet" type="text/css" href="csgositecss.css"> 
    <title>CSGOCarry.com | Win Big!</title> 

    <style> 
    .center{ 
     position:absolute; 
     height: 50px; 
    /* width: 50px; */ 
     left:50% 
     top:50% 
    } 
    </style> 
</head> 
<body> 
    <div class="center"> 
     <h1>Welcome to CSGOCarry</h1> 
    </div> 
</body>

來源

2016-02-25 19:07:52 Rob

我懷疑你真的想使用固定定位爲中心。使用margin：0 auto或帶有text-align：center的父級的內聯塊div都是更好的投注。但是，如果你想與固定定位於中心，這裏是你怎麼做：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="csgositecss.css"> 
     <title>CSGOCarry.com | Win Big!</title> 
     <style> 
      body { 
       background-image: url("csgocarryback.jpg"); 
       background-size: 100%; 
      } 
      h1 { 
       text-align:center; 
       font-size:50px; 
      } 
      div { 
       height: 200px; 
       width: 400px; 
       position: fixed; 
       top: 50%; 
       left: 50%; 
       margin-top: -100px; 
       margin-left: -200px; 
      } 
     </style> 
    </head> 
    <div class="center"> 
     <h1>Welcome to CSGOCarry</h1> 
    </div> 
</html>

來源

2016-02-25 19:10:50 kloddant

您可以居中你<h1>（頭1）這樣的。

<!DOCTYPE html> 

<link rel="stylesheet" type="text/css" href="csgositecss.css"> 

<head> 
    <title>CSGOCarry.com | Win Big!</title> 
</head> 
<body> 
    <center> 
     <h1>Welcome to CSGOCarry</h1> 
    </center> 
</body> 
</html>

或者您提供的代碼將是正確的方法。 .html文件：

<!DOCTYPE html> 
<link rel="stylesheet" type="text/css" href="csgositecss.css"> 
<head> 
    <title>CSGOCarry.com | Win Big!</title> 
</head> 
<body> 
    <div class="center"> 
     <h1>Welcome to CSGOCarry</h1> 
    </div> 
</body> 
</html>

.css文件：

body {background-image: url("csgocarryback.jpg"); background-size: 100%;} 

h1 {color:white; text-align:center; font-size:50px} 

div { 
    height: 200px; 
    width: 400px; 
    background: none; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -200px; 
} 

center{ 
    position:absolute; 
    height: 50px; 
    width: 50px; 
    left:50% 
    top:50% 
}

來源

2016-02-25 19:20:32 702cs

你裏面，也都提供同樣使用過時的元素無效HTML（''

）。不要這樣做。 – Rob

的工作原理與的工作方式相同，任何從1996年到現在的瀏覽器都會理解它，當然最好使用你的css和class，這樣你就可以確定你想要的中心了。通過使用，您可以將它留給客戶端瀏覽器來確定您在css中心看到的次要設置{code} – 702cs

「It works」永遠不會使用過時元素的原因，這些元素可能會從瀏覽器使用中移除，恕不另行通知： https://www.w3.org/TR/html5/obsolete.html#non-conforming-features – Rob

這裏是你的代碼的重新寫入和評論不需要的。我簡化了一些你添加的CSS，並將它作爲內聯樣式。粘貼整個代碼，看看它如何呈現，讓我知道這是否工作。並使其外部CSS複製一切style標籤

<!DOCTYPE html> 
<head> 
<style type="text/css"> 
body { 
    background-image: url("http://CSGOCarry.com/csgocarryback.jpg"); 
    background-size: 100%; 
} 

h1 { 
    color:black; 
    text-align:center; 
    font-size:50px; 
} 

div { 
    height: 200px; 
    width: 400px; 
    background: none; 
    /*position: fixed;*/ 
    /*top: 50%;*/ 
    /*left: 50%;*/ 
    /*margin-top: -100px;*/ 
    /*margin-left: -200px;*/ 
} 
.center{ 
    /*position:absolute;*/ 
    /*height: 50px;*/ 
    /*width: 50px;*/ 
    /*left:50%;*/ 
    /*top:50%;*/ 
    margin: 0 auto; 
} 

</style> 
<link rel="stylesheet" type="text/css" href="csgositecss.css"> 
<title>CSGOCarry.com | Win Big!</title> 
<div class="center"> 
    <h1>Welcome to CSGOCarry</h1> 
</div> 

</head> 


<body> 
    <div class="center"> <h1>This is a header</h1> <p> velit esse 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 

</body> 
</html>

來源

2016-02-25 19:24:42 Jcoder28

您頭部元素內的HTML無效。 – Rob

是的，我做的是我想讓他能夠立即測試或剪切/粘貼到他的外部文件中... – Jcoder28

.container { 
 
    width: 100%; 
 
    right: 0; 
 
    left: 0; 
 
} 
 
.center { 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    
 
    <head> 
 
    
 
    <title>CSGOCarry.com | Win Big!</title> 
 
    <link rel="stylesheet" type="text/css" href="csgositecss.css"> 
 
    
 
    </head> 
 
    
 
    <body> 
 
    
 
    <div class="container"> 
 
     <div class="center"> 
 
     <h1>Welcome to CSGOCarry</h1> 
 
     </div> 
 
    </div> 
 
    
 
    </body> 
 

 
</html>

來源

2016-02-25 20:40:54 Amir

HTML - 網頁中心的文字

回答

相關問題