Fatal编程技术网
  • html/
  • HTML-网页中心的文本

HTML-网页中心的文本

html css

HTML-网页中心的文本,html,css,Html,Css,好的，我对网站开发还不太熟悉，我正在和一个朋友开发一个新网站。到目前为止，我已经提出了这段代码，但由于某种原因，文本位于另一行。如何使此文本沿页面上的一行展开？谢谢 代码（HTML） 您的HTML无效。内容和相关元素不能位于元素内。CSS还需要包含在标记中。除非是，否则它不会被应用。首先，头部标签中的CSS应该在样式标签中，而DIV根本不应该在头部，它属于主体部分 您的CSS.center{}将DIV的宽度设置为50px，当然这不会将所有文本放在一行中 这将是有效的： <!DOCTYPE

好的，我对网站开发还不太熟悉，我正在和一个朋友开发一个新网站。到目前为止，我已经提出了这段代码，但由于某种原因，文本位于另一行。如何使此文本沿页面上的一行展开？谢谢

代码（HTML）

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

首先，头部标签中的CSS应该在样式标签中，而DIV根本不应该在头部，它属于主体部分

您的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>


CSGOCarry.com |大获全胜！
.中心{
位置：绝对位置；
高度：50px；
/*宽度：50px*/
左：50%
最高：50%
}
欢迎来到CSGOCarry
我怀疑您是否真的想使用固定定位进行定心。使用margin:0 auto或具有文本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>


CSGOCarry.com |大获全胜！
身体{
背景图片：url（“csgocarryback.jpg”）；
背景大小：100%；
}
h1{
文本对齐：居中；
字体大小：50px；
}
div{
高度：200px；
宽度：400px；
位置：固定；
最高：50%；
左：50%；
利润上限：-100px；
左边距：-200px；
}
欢迎来到CSGOCarry
您可以像这样居中放置
（标题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>
这里是对代码的重新编写，并对不需要的代码进行了注释。我简化了您添加的一些css，并将其作为内联样式放置。粘贴整个代码，看看它如何呈现，让我知道这是否有效。为了使其成为外部css，请复制
样式
标记中的所有内容

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


身体{
背景图像：url（“http://CSGOCarry.com/csgocarryback.jpg"); 
背景大小：100%；
}
h1{
颜色：黑色；
文本对齐：居中；
字体大小：50px；
}
div{
高度：200px；
宽度：400px；
背景：无；
/*位置：固定*/
/*最高：50%*/
/*左：50%*/
/*利润上限：-100px*/
/*左边距：-200px*/
}
.中心{
/*位置：绝对位置*/
/*高度：50px*/
/*宽度：50px*/
/*左：50%*/
/*最高：50%*/
保证金：0自动；
}
CSGOCarry.com |大获全胜！
欢迎来到CSGOCarry
这是一个标题velit esse
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责


.container{
宽度：100%；
右：0；
左：0；
}
.中心{
文本对齐：居中；
}

CSGOCarry.com |大获全胜！
欢迎来到CSGOCarry
要将文本置于网页中心，请执行以下操作：

。文本中心{
保证金：0；
填充：0；
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
}

欢迎来到CSGOCarry
您也提供了使用过时元素的无效HTML（
）。不要那样做。工作方式与1996年至今的任何浏览器都会理解的方式相同，当然最好使用css和类，这样您就可以确保按自己的意愿显示中心。只需使用客户端浏览器来确定css中心{code}中的次要设置，“它工作”永远不是使用过时元素的理由，这些元素可能会在不通知的情况下从浏览器使用中删除：Rob感谢您提供的链接，从未真正看到过所有这些非常有趣的内容！你的HTML在head元素中是无效的。是的，我所做的是我希望他能够立即测试或将其剪切/粘贴到他的外部文件中。。。 
<!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>

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

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%
}

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