Php 元素上的样式不会更改
我制作了一个页面，其中显示的图像根据时间变化。页面上有一段文字，上面写着“早上好/下午好/晚上好/晚上好”，然后在旁边显示时间 现在我想更改时间的位置，使其位于页面的中间，但是，当我尝试使用CSS在其上添加样式时，文本不会移动 我试着对Php 元素上的样式不会更改,php,html,css,Php,Html,Css,我制作了一个页面，其中显示的图像根据时间变化。页面上有一段文字，上面写着“早上好/下午好/晚上好/晚上好”，然后在旁边显示时间 现在我想更改时间的位置，使其位于页面的中间，但是，当我尝试使用CSS在其上添加样式时，文本不会移动 我试着对p元素本身做了一个样式设置，比如边距，并将位置设置为相对，但似乎没有任何效果。我还尝试在身体上做造型，但与p元素一样，它不起作用 <!DOCTYPE html> <html lang="nl"> <
pp<!DOCTYPE html>
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="site2.css">
<title>PHP time based page</title>
</head>
<body>
<?php
date_default_timezone_set("Europe/Brussels");
function getTime() {
$Time = explode(" ", date('h:i A'));
$time = $Time[0];
if (($Time[1] === "PM") && ($time !== "00:00")) {
$temp = explode(":", $time);
$temp[0] = ((int)$temp[0]) + 12;
$time = implode(":", $temp);
}
$Moment = "";
if (($time >= "06:00") && ($time < "12:00")) {
$Moment = $Moment . "morning";
define("TIME", "Goodmorning!");
}
else if(($time >= "12:00") && ($time < "18:00")){
$Moment = $Moment . "afternoon";
define("TIME", "Goodafternoon!");
}
else if(($time >= "18:00") && ($time < "24:00")){
$Moment = $Moment . "evening";
define("TIME", "Goodevening!");
}
else {
$Moment = $Moment . "night";
define("TIME", "Goodnight!");
}
return ["moment" => $Moment, "time" => $time];
}
function getGreeting() {
return "Good".getTime()["moment"].", It is now ".getTime()["time"];
}
$images = [
"morning",
"afternoon",
"evening",
"night"
];
?>
<p><?php echo getGreeting(); ?></p>
<div class="images">
<?php
$moment = getTime()["moment"];
?>
<img src="images/<?php echo $moment; ?>.png" alt="<?php echo $moment; ?>">
</div>
</body>
</html>
您应该添加
位置：绝对编码到段落中，然后使用“宽度”和“高度”属性对其进行定位
如果它不起作用，你应该给两个元素一个z-索引：您应该添加位置：绝对编码到段落中，然后使用“宽度”和“高度”属性对其进行定位
如果它不起作用，你应该给两个元素一个z-索引：将
&
包装到它自己的div中
然后使用“弯曲”或“绝对位置到中心”
<div class="images">
<div class="center">
<p><?php echo getGreeting(); ?></p>
<?php $moment = getTime()["moment"]; ?>
</div>
<img src="images/<?php echo $moment; ?>.png" alt="<?php echo $moment; ?>">
</div>
将
&
包装到它自己的div中
然后使用“弯曲”或“绝对位置到中心”
<div class="images">
<div class="center">
<p><?php echo getGreeting(); ?></p>
<?php $moment = getTime()["moment"]; ?>
</div>
<img src="images/<?php echo $moment; ?>.png" alt="<?php echo $moment; ?>">
</div>
CSS有一个名为text align
的属性，该属性的值可能为center
。这就是您需要的，请检查下面的代码段，我确保此样式位于具有该属性的类中
正文{
颜色：黑色；
}
p{
字体大小：32px；
}
塔克先生{
文本对齐：居中；
}
基于时间的网页
早上好
时间是上午9点
">
CSS有一个名为文本对齐
的属性，该属性可能为中心
。这是您所需要的，请检查下面的代码段，我确保此样式位于具有该属性的类
中
正文{
颜色：黑色；
}
p{
字体大小：32px；
}
塔克先生{
文本对齐：居中；
}
基于时间的网页
早上好
时间是上午9点
">
尝试使用图像的绝对位置和内容的flexbox
将文本居中对齐
正文{
颜色：黑色；
}
p{
字体大小：32px；
}
.图像{
位置：相对位置；
文本对齐：居中；
}
.中心{
高度：100vh；
宽度：100vw；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.图像img{
位置：绝对位置；
排名：0；
左：50%；
转换：翻译（-50%）；
z指数：-1；
身高：100%；
宽度：100%；
对象匹配：覆盖；
}
基于时间的网页
早上好
时间是上午9点
">
尝试使用图像的绝对位置和内容的flexbox
将文本居中对齐
正文{
颜色：黑色；
}
p{
字体大小：32px；
}
.图像{
位置：相对位置；
文本对齐：居中；
}
.中心{
高度：100vh；
宽度：100vw；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.图像img{
位置：绝对位置；
排名：0；
左：50%；
转换：翻译（-50%）；
z指数：-1；
身高：100%；
宽度：100%；
对象匹配：覆盖；
}
基于时间的网页
早上好
时间是上午9点
">
将PHP代码加载到JSFIDLE中没有多大意义。至少用实际呈现的HTML代码替换它。（以及在该上下文中实际加载的图像，否则这作为一个“实例”开始就毫无价值。）将PHP代码加载到JSFIDLE中没有多大意义。至少用实际呈现的HTML代码替换它。（还有一个在该上下文中实际加载的图像，否则这作为一个“活生生的例子”开始就毫无价值。）我理解你在这里通过包装元素来做什么，但是用这种方法文本仍然不会移动为什么它不会移动？我不知道为什么它不会移动，我没有收到任何错误或任何东西将原始HTML转储到你的js小提琴中，我会看一看。在这里，我通过包装元素理解你在这里做什么，但是使用这种方法文本仍然不会移动为什么它不会移动？我不知道为什么它不会移动，我没有得到一个错误或任何东西在你的js小提琴转储原始HTML，我会看看。这是如何被标记为答案的？它甚至都不符合他的要求！他想将文本垂直和水平居中放置在一个平面上image@CIB看看这个问题。它有CSS规则来试图解决这个问题，其中左边距和右边距被尝试。因此，集中是指水平的。关于它不在图像上，你有一个观点，即图像在集中文本下面，然而，似乎答案足够好，可以作为接受的起点。这是如何被标记为答案的？它甚至都不符合他的要求！他想将文本垂直和水平居中放置在一个平面上image@CIB看看这个问题。它有CSS规则来试图解决这个问题，其中左边距和右边距被尝试。因此，集中是指水平的。关于它不在图像上，你有一个观点，即图像在集中文本下面，然而，似乎答案足够好，可以作为接受的起点。
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.images {
width: 100%;
height: 100vh;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}