Login or Register to Ask a Question and Join Our Community


Web Development

Center image between two text paragraphs.

Login to Discuss or Reply to this Discussion in Our Community

 
Thread Tools Search this Thread
Top Forums Web Development Center image between two text paragraphs.
# 1  
Old 01-25-2019
Center image between two text paragraphs.
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


Code:
<!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  
Old 01-25-2019
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  
Old 01-25-2019
You might consider an approach like this:


Code:
<!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  
Old 01-26-2019
Sorry that does not work when the call to phpinfo() is done.
As I said in my edit :
Quote:
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.
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 ---

Quote:
Originally Posted by Corona688
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.
>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 :
Code:
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.
Login or Register to Ask a Question

Previous Thread | Next Thread

10 More Discussions You Might Find Interesting

1. Shell Programming and Scripting

Script to convert text to image

Hi Can someone help me writing a script to convert the texts in a text file into images for each token? Thanks in advance. :) (1 Reply)
Discussion started by: my_Perl
1 Replies

2. Shell Programming and Scripting

How to annotate text on image files?

Dear Sir, The problem description as follows I have a folder named abc with files of different extensions such as: bcsu.txt hsdk.prot ajia.sh sai.hm abcd_1213_saj.png I am supposed to write a bash script which reads all the .png files and read the 6th7th8th9th(word/numerals) here it is... (5 Replies)
Discussion started by: bal_nair
5 Replies

3. Shell Programming and Scripting

Split text into paragraphs

Hi all! I want to make a code to split sentences into paragraphs maybe 4-5 sentences into one <p>text</p> there are no new lines in the text string any ideas with AWK, SSH? Thank you! (5 Replies)
Discussion started by: sanantonio7777
5 Replies

4. Shell Programming and Scripting

splitting a large text file into paragraphs

Hello all, newbie here. I've searched the forum and found many "how to split a text file" topics but none that are what I'm looking for. I have a large text file (~15 MB) in size. It contains a variable number of "paragraphs" (for lack of a better word) that are each of variable length. A... (3 Replies)
Discussion started by: lupin..the..3rd
3 Replies

5. Shell Programming and Scripting

Add text to image files

Hi to all, Some help here please. I have a several image files (photos, jpg files), let say 100 photos, and a list of 100 different little comments in a text file, each comment for each image. Somebody knows if I can add (like a watermark in the bottom) this text comments and how in the... (3 Replies)
Discussion started by: cgkmal
3 Replies

6. Shell Programming and Scripting

deleting text records with sed (sed paragraphs)

Hi all, First off, Thank you all for the knowledge I have gleaned from this site! Deleting Records from a text file... sed paragraphs The following code works nearly perfect, however each time it is run on the log file it adds a newline at the head of the file, run it 5 times, it'll have 5... (1 Reply)
Discussion started by: Festus Hagen
1 Replies

7. Shell Programming and Scripting

Trying to center my output text

Im stumped on how to center the output of my echo command. I also would like to center my calender too, but is the command to center the same for echo and cal? (3 Replies)
Discussion started by: bri4nd4h3r0
3 Replies

8. Shell Programming and Scripting

Redirect text to image file

How can I redirect text data to an image (png, jpg, gif... etc) file using perl on unix solaris environment?? Please suggest. Pooja (1 Reply)
Discussion started by: wadhwa.pooja
1 Replies

9. Windows & DOS: Issues & Discussions

Unix text doc with a .gif image

I would like to insert a .gif image into a text file that is generated by a Unix-based database application. Can anyone please tell me how I can achieve this? (7 Replies)
Discussion started by: sunita_rao
7 Replies

10. Shell Programming and Scripting

Stamping Text on an Image File

Hi all, again, I have lots of questions I guess. This one should be easier though :) . I have a goal to be able to put some preformatted text into a template (which is now a tiff file, but can be changed) and then output it to a printer. Right now we're thinking PostScript might work or some... (0 Replies)
Discussion started by: pageld
0 Replies
Login or Register to Ask a Question