Question

好的，所以我对网站开发很陌生，正在和朋友一起开发新网站。到目前为止，我已经提出了这个代码，但由于某种原因，文本在一个不同的行上。如何使该文本沿着页面的一行延伸？谢谢！

代码（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;
}

Answer 1

要使文字位于网页的中心，请按以下步骤操作：

.text-center {
    margin: 0;
    padding:0;
    text-align: center;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
}

<div class="text-center">
    <h1>Welcome to CSGOCarry</h1>
</div>

Answer 2

首先，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>

Answer 3

您的HTML无效。内容和相关元素不能位于<head>元素内。您的CSS也需要包含在<style>标记中。除非是，否则它不会被应用。

Answer 4

我怀疑你真的想用固定定位进行定心。使用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>

Answer 5

您可以像这样将<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%
}

Answer 6

这是对您的代码的重写，并评论了不需要的代码。我简化了你添加的一些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>

Answer 7

＆＃13;

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

＆＃13;

<!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>

＆＃13;

HTML - 网页中心的文字

7 个答案: