Question

出于某种原因，我通过帖子加载的图片没有加载居中。它加载在页面的左上角，就像页面上没有css一样。我已经多次查看代码，但我无法弄清楚它有什么问题。

以下代码是我的index.php

<?php $i = urlencode($_GET['i']); 

$image = str_replace("%2F", "/", $i);


?>
<head>
<title>RizzelDazz Images</title>

<Style type=css>
*
{
    padding: 0;
    margin: 0;
}
#over
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>

<body>

<div id="over">
    <span class="Centerer">
   <?php if($i=="") { echo ""; } else { echo"<img src='/../images" . $image . ".jpg'/>"; } ?>
   </span>
</div>


</body>

Answer 1

如果您发布的代码是index.php文件的全部内容，那么您有几个问题：

您没有doctype。在<!DOCTYPE html>文件的顶部添加index.php。
您没有<html></html>个标签。文档中的所有内容都应该放在<html></html>标记内。
您的开场<style>标记错误。你有<Style type=css>;它应该是：

<style type="text/css">（没有大写字母，text/css左右的引号）

以下是包含这些更改的代码 - 它们很可能会解决您的问题。

<!DOCTYPE html>
<html>
<?php $i = urlencode($_GET['i']);
    $image = str_replace("%2F", "/", $i);
?>
<head>
<title>RizzelDazz Images</title>
<style type="text/css">
* {
    padding: 0;
    margin: 0;
}
#over {
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered {
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>

<body>
<div id="over">
    <span class="Centerer">
    <?php if($i=="") { echo ""; } else { echo"<img src='/../images" . $image . ".jpg'/>"; } ?>
    </span>
</div>
</body>
</html>

Answer 2

我认为这是因为你需要添加

<style type="text/css">

而不仅仅是

<style type="css">

它仍然适用于jsfiddle，因为不需要声明样式类型。希望这会有所帮助：）

图像不在页面上

2 个答案: