Question

我正在为叔叔的业务写一个网站。我今天刚开始。

**Update: I have fixed the website as I got an answer.
But to all who want to know, what I was dealing with, 
I put a code snippet below. Win-Win for all.**

我被困在一件事上。首先看一下：timeout decorator documentation

看看我的代码，非常简单：

的index.php

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
 <?php include 'php/start.php'; ?>
 <?php include 'php/start2.php'; ?>
 <?php include 'php/start3.php'; ?>
</body>
</html>

的PHP / start.php

<?php
  echo '<head><title>Super Express Logistics</title></head>';
  echo "<header style=\"background-color:pink\">
  <p class=\"centered\">Hello</p></header>";
?>

的PHP / start2.php

<?php
  echo "<header style=\"background-color:brown\"><p class=\"centered\">Ola!
  </p></header>";
?>

的PHP / start3.php

<?php
  echo "<header style=\"background-color:lightblue\">
  <p class=\"centered\">こんにちわ　！</p></header>";
?>

CSS / stylesheet.css中

header{
width: 100%;
height: 100vh;
background-color: #000000;
color: white;
}

.centered {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }

问题正如您在我的网站（有点）中看到的那样，当您滚动时，中间会有一些奇怪的文字重叠。所有这三个文本都包含在<p> SomeTextHere </p>

中

我将position:fixed放在css中只是为了将文字放在完美的中心，但正因为如此，所有这些文本都跳到了中心

我可以喜欢，修复父母中心每个文字的位置，当我滚动时，它会与父母一起滚动吗？

＆＃13;

header{
width: 100vw;
height: 100vh;
color:white;
}

.centered{
position:fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}

＆＃13;

<html>
  <body>
    <header style="background-color:pink"><p class="centered"> Hi !</p></header>    
    <header style="background-color:brown;"><p class="centered"> Ola !</p></header>
    <header style="background-color:teal"><p class="centered"> こんにちわ !</p></header>
  </body>
</html>

＆＃13;

Answer 1

您可以通过以下方式更新CSS：

header{
position: relative;
width: 100vw;
height: 100vh;
color:white;
}

.centered{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}

将项目固定在中心但启用滚动

1 个答案: