View Full Version : aligning-centering images/text

12-03-2002, 01:22 PM

How does one align and centre both images(jpgs/gifs etc) and text (in document.write("") method) in javascript in an html doc?
So for example an image is centred at the top of the browser and text is centred or aligned right or left?

Also what fonts are supported by javascript and how to change font and size please.

Many Thanks

12-03-2002, 01:55 PM
Using the document.write() command, you can input any valid HTML and it will write to the page. Here is an example for a center aligned image:

<script language="javascript">
document.write("<p align='center'><img border='0' src='http://www.wherever.com/wherever.gif' width='200' height='200'><br><br></p>TEXT");

The height and width tags are, of course, optional.

Anyways, notice that it is just normal HTML inside the tags. The JS reads the HTML, and writes it to the page, simple.

Font color, size, face, and all that is the same way. You just stick it in, and JS can write it to the page. Hope that helps!

12-03-2002, 02:02 PM
javascript does not perform any formatting. this is done by the html that surrounds the javascript. to center an element, you sould use the text-align style for the parent elemtent eg
<div style="text-align:center">
Your text in here
</div>will center the text within that div. You can access the style properties of an element using javascript, but that's only necessary if you want that style property to be dynamic.

Similarly, fonts are not supported by javascript, but by html telling the browser what fonts to use. The actual fonts available are generally determined by the user's browser (again, it is possible to embed fonts in a document. This is html and generally not worth the effort and bandwidth it requires).

12-04-2002, 08:53 AM
Thanks to everyone who posted a reply!

below is an idea of what im trying to do.

image.jpg(top center)

(<p> or <br> for space btw image and text

Text will go here in this format in the middle and
center of the browser each line underneath itself

//Then a Name in the left and right corner of the browser//
Name of person Name of Person

Then the name of a company here
and below their moto

im busy learning hmtl and javascript .not having a problem with the image file its just getting text etc where the boss wants it!

thanks in advance for help

12-04-2002, 11:57 AM
OK. Firstly, you don't need to put in a blank line. Something like this should work:

<div style="text-align: center">
<img src="...">
<p style="margin-top:12px">
Your content here

12-04-2002, 12:35 PM
ok got that bit with no problems.

now the name in the left hand corner and the name in the right hand corner of the browser below the image and text.

also fonts! what fonts are supported by html? i know its
<font face ="arial"></font> to change but ive tried some other fonts such as old english etc and its not supported.

another more complex question(if u know about it) how about repeating an image in a strip on a page.I know about <body background = "... .jpg"> to make the background an image but is it possible to alter it so you can write text over the image and make the text visible.So that the image is repeated in a strip and not the entire background.


12-04-2002, 01:42 PM
Wellp, first of all, any font you can think of works with HTML. The thing is, the user has to have that font saved onto their computer for them to be able to view it, so you want to try to stay simple. Times New Roman and Arial are sure bets, but there are plenty of others.

Your background image tiling vertically, you use CSS for. Simple, really.

<body background="image.jpg" style="background-repeat:'repeat-y'">

You add the style tag into your body tag right after you specify the location of your image. It makes the background image tile vertically down the page.

12-04-2002, 04:21 PM
thanks bac.

got a book on javascript with 3 pages on CSS so ill check that out while I use your example.

Im learning javascript pretty fast..i think its a cool script...then I need to master server side scripts like asp,perl etc.

do u know anything about xml? is it a server side script or can it be used as one?

where do you think I should start and what do you think I should start with learning server side scripts?

I know ADO ,vb and a tiny bit of java , so I know abit about coding.


12-04-2002, 04:35 PM
Originally posted by Buzz
... I need to master server side scripts like asp,perl etc. ...
where do you think I should start and what do you think I should start with learning server side scripts? ...

3 letters one programming language.
PHP - its just the best http://www.cg9com.web1000.com/smilies/rainbow.gif

12-04-2002, 04:47 PM

can u give me some more info on PHP.
go ways to get into it etc..decent books that dont cost my left little finger?


12-04-2002, 08:49 PM
Check right here:


I was interested a bit ago, and have yet to find time to learn it, but I got some help.

12-05-2002, 05:19 AM
i went to a book store near me and bought a PHP book, its a little overwhelming because its so big, but its not actually very bad.
the language is really awsome, cost me 50 dollars

12-05-2002, 10:13 AM
thanks everyone for your input.

i went to amazon to start looking for books.they have a few good ones...but first i will check out tutorials online at the sites you mentioned bac.

im going to get some resources on xml and asp aswell but im still very new to web dev so i guess i should get the client side mastered first.

back to my first post on this thread....how can i align text on a page in html so that its on the far left or far right of the page such as:

Text1 Text2

60px to move it down etc...but how about across the page???
<Center + something ?> <Align=right?>

12-05-2002, 03:42 PM
Well, here are two methods for aligning text, first, the HTML attributes.

<p align="right">Whatever here...</p>

Then there is the CSS alignment...

<p style="text-align:'right'">Whatever here...</p>

Take your pick. :D

*Note: Where you see right, know that that can be changed to left or center to change where it is aligned horizontally.

Also, if you do not specify text to be aligned to the center or right, it is automatically put on the left.

12-05-2002, 03:49 PM
Thanks Bac!:thumbsup:

12-05-2002, 03:50 PM
Noo problem. Glad to be able to help out. Good luck with everything.

12-05-2002, 06:28 PM

ok ive got text in the right and left corner of the browser...but...
. . . . not on the same line!

how can I get it on the same line.....????


12-05-2002, 06:34 PM
I always wondered myself how this could be accomplished...that was quite a while back. I'm sure there are other ways, but the easiest way (I think) would be tables.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<p align="left">Left Text</td>
<p align="right">Right Text</td>