我正在为我叔叔的公司写一个网站。我今天才开始。
**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.**
我被困在一件事上。 首先看看这里:MyWebsiteIsHere
看看我的代码，它非常原始:
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只是为了将文本放在完美的中心，但正因为如此，所有这些文本都会跳到中心
我可以喜欢，将每个文本的位置固定在其父级的中心，并且当我滚动时，它会与父级一起滚动吗？
header{
width: 100vw;
height: 100vh;
color:white;
}
.centered{
position:fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}<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>最佳答案
您可以通过以下方式更新 CSS:
header{
position: relative;
width: 100vw;
height: 100vh;
color:white;
}
.centered{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
关于php - 将元素固定在中心但启用滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47483616/