1
私はおじさんのビジネスのためのウェブサイトを作成しています。私は今日始めました。アイテムはセンターに固定されていますがスクロールが可能です
**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.**
私は1つのことに固執しています。 は、まずここを見て：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%);
}
質問 あなたは私のウェブサイトで見たよう（ちょっと） 、あなたがスクロールすると、奇妙なテックスがあります真ん中には重なり合っていない。すべての3つのテキストが<p> SomeTextHere </p>
で囲まれて私は完璧中央にテキストを配置するcssにposition:fixedを置くが、そのため、これらのテキストのすべてが中央にジャンプ
は、私が好きなことができ、修正します親の中心にある各テキストの位置、およびスクロールすると親とスクロールします。
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>
はい。 'position：relative; 'を追加します。ヘッダーと位置について：絶対; 「中心に置いた」のためにこれは同じですか？ https://jsfiddle.net/jv8xtaz9/1/ –
Worked！ありがとう。 Plzはこの答えを追加するので、私はそれを答えとしてマークすることができます。 – Opium
アヘン、質問をするときは、ここで[mcve]をスニペットボタン（ '<>'）を使って作成してください。このようにして、あなたの質問はあなたのウェブサイトで修正された後でさえも、他の人にとって関連性があり役立ちます。 –