Center image between two text paragraphs.

Applications Web Development
1

I want to show a page with an image between 2 any paragraphs.

I tried the following script.
But the image is not centered.

SUSE Paste

<!DOCTYPE html>
<html>
    <head>
        <style>
            center.center_1 {
                  margin: auto;
                  width: 60%;
                  border: 3px solid #73AD21;
                  padding: 10px;
                }
            img.img_1 {
                display: table-cell;
                margin-left: auto;
                margin-right: auto;
                vertical-align: middle;
                }
        </style>

        <title>THIS IS TEST PROJECT</title>
    </head>

    <body>
        <h1><center class="center_1">THIS IS TEST PROJECT</center></h1>
      <p> Here goes the image <br>
        <img class="img_1" src="stuck-out_tongue.png" alt="stuck-out_tongue.png" style="width:20%">
      <p> image end <br>
        <h1><center class="center_1">PHP IS FOLLOWING</center></h1>
        
        <div class="sample">
          <p> Here goes the php code<br>
            <?php 
              date_default_timezone_set("Europe/Paris");
              echo "Today is : ".date("F j, Y, g:i a"); 
                    /**
                    *
                    *    PHp TEST
                    */
                    phpinfo();
            ?>
         </p>
      </div>

    </body>

</html>

Any help is welcome

--- Post updated at 18:53 ---

It seems that the problem come from the php code.
Is there any tags I can use so that the php output does not interfere with the html page layout.

Any help is welcome

2

What did the PHP code do, exactly?

Do not say "stopped it from centering the image". Show us how it altered your HTML, or what stylesheet changes it made.

It's entirely possible that you will have to work with whatever stylesheet you're inside rather than forcing changes from within.

3

You might consider an approach like this:

<!DOCTYPE html>
<html>
<head>
    <style>
        .center_1 {
            text-align: center;
            width: 60%;
            border: 3px solid #73AD21;
            padding: 10px;
            margin: auto;
        }

        .img_1 {
            text-align: center;
            margin: 10px;
        }
    </style>

    <title>THIS IS TEST PROJECT</title>
</head>

<body>
    <div class="center_1">
        <h1>THIS IS TEST PROJECT</h1>
    </div>
    <div class="center_1"> Here goes the image </div>
    <div class="center_1"> <img class="img_1" src="stuck-out_tongue.png" alt="stuck-out_tongue.png" style="width:20%"></div>
    <div class="center_1"> image end </div>
    <div class="center_1">
        <h1>PHP IS FOLLOWING</h1>
    </div>
 <div>
 /**  the rest of your code here . **/
 </div>

</body>
</html>
4

Sorry that does not work when the call to phpinfo() is done.
As I said in my edit :

Is there any other container that I can use ?

HTML result without phpinfo()

SUSE Paste

HTML result with phpinfo() - small window size

SUSE Paste

HTML result with phpinfo() - larger window size

SUSE Paste

Any help is welcome.

--- Post updated at 17:10 ---

>What did the PHP code do, exactly?
It is a builtin function which shows/printout php info

>Do not say "stopped it from centering the image". Show us how it altered your HTML, or what stylesheet changes it made.
That is shown in the in thread #1

>It's entirely possible that you will have to work with whatever stylesheet you're inside rather than forcing changes from within.
[/quote]
That is my question.
But I doubt that it is not possible to "format" or put in a "container" the output of a function.

Any help is welcome

--- Post updated at 18:17 ---

From the php site : PHP: phpinfo - Manual
comment from Mardy dot Hutchinson at gmail dot com

Inserting the code in place of the call : phpinfo();
by :

ob_start();
phpinfo();

preg_match ('%<style type="text/css">(.*?)</style>.*?(<body>.*</body>)%s', ob_get_clean(), $matches);

# $matches [1]; # Style information
# $matches [2]; # Body information

echo "<div class='phpinfodisplay'><style type='text/css'>\n",
    join( "\n",
        array_map(
            create_function(
                '$i',
                'return ".phpinfodisplay " . preg_replace( "/,/", ",.phpinfodisplay ", $i );'
                ),
            preg_split( '/\n/', $matches[1] )
            )
        ),
    "</style>\n",
    $matches[2],
    "\n</div>\n";

Do the job. See screenshot :

SUSE Paste

thank you for helping.