Image is not centering on page

Question

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>

Paste up the HTML code that is generated by the PHP file, it's hard to tell what's going wrong based on the raw PHP code. — APAD1, May 21 '14 at 19:19
@AndersG That sort of worked, now its centered at the top middle — user3546563, May 21 '14 at 19:20
Your `#over` id only shows `position:absolute;` but you haven't given any `x-y` positions. That could be a factor. Plus what Anders G mentioned. ` — Funk Forty Niner, May 21 '14 at 19:20
@user3546563 That's probably because now it's interpreted as style by the browser. Now you may see **[this answer](http://stackoverflow.com/a/7310398/2311559)** for centering the image vertically. Hope this helps — agrm, May 21 '14 at 19:22

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

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

You have no doctype. Include <!DOCTYPE html> at the top of your index.php file.
You have no <html></html> tags. Everything in your document should be go inside <html></html> tags.
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>

score 0 · Answer 2 · answered May 21 '14 at 19:23

0

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 :)

answered May 21 '14 at 19:23

Sam Denton

465
3
18

Image is not centering on page

2 Answers2