CODEWITHSUNDEEP
htmlcss
user3546563
user3546563

Reputation: 73

Image is not centering on page

For some reason, my image that I load though my post does not load centered. It loads at the top left of the page like there is no css on the page whatsover. I have gone over the code several of times but I can not figure out what is wrong with it.

The following code is my 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>

Upvotes: 0

Views: 79

Answers (2)

willanderson
willanderson

Reputation: 1578

If the code you posted is the entire content of your index.php file, you have several issues:

  1. You have no doctype. Include <!DOCTYPE html> at the top of your index.php file.

  2. You have no <html></html> tags. Everything in your document should be go inside <html></html> tags.

  3. Your opening <style> tag is wrong. You have it as <Style type=css>; it should be:

    <style type="text/css"> (no capital letters, quotes around text/css)

Here is your code with these changes - they will most likely fix your issues.

<!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>

Upvotes: 3

Sam Denton
Sam Denton

Reputation: 465

I think this is because you need to add 

<style type="text/css">

rather than just 

<style type="css">

It will still work on jsfiddle as there is no need to state a style type. Hope this helps :)

Upvotes: 0

Related Questions