/    Sign up×
Community /Pin to ProfileBookmark

Centering an image in strict HTML 4.01

Copy linkTweet thisAlerts:
Jul 03.2009

I am usung the code below to create an image in an HTML 4.01 strict document.

How can I cause the image to be centered?
I was thinking of using

[CODE]newImg.write(‘<DIV align=center>’);[/CODE]

But [B]align [/B]is deprecated in strict HTML 4.01 and the W3C validator flags any use of [B]align[/B],

[CODE] function setImageURL(local)
{
newImg = document.createElement(‘img’);
newImg.src = GetURL(local);
document.body.appendChild(newImg);
}
[/CODE]

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJul 03.2009 — use CSS and give youy image margin left and right the value [B]auto[/B]. And give your image a certain height anf weight. CSS as well.
Copy linkTweet thisAlerts:
@Howard_KaikowauthorJul 03.2009 — use CSS and give youy image margin left and right the value [B]auto[/B]. And give your image a certain height anf weight. CSS as well.[/QUOTE]

Thanx.

I'm new to CSS. I just used CSS for the first time 1-2 daze ago.

Using

[CODE]<style type="text/css">
p.center {text-align: center}
div.center {text-align: center}
</style>
[/CODE]

In the code below, the non-Javascript image is centered, but the image created by Javascript code is not centered. setImageURL is the function I posted in my original posting to start this thread.

How do I use CSS within Javascript?

[CODE] <div class=center>
<script type="text/javascript">
setImageURL('http://www.standards.com/ThisAndThat/ReadFile.jpg');
</script>

<noscript>
<p><IMG alt="ReadFile" src="http://www.standards.com/ThisAndThat/ReadFile.jpg"></p>
</noscript>
</div>
[/CODE]
Copy linkTweet thisAlerts:
@ReisJul 03.2009 — Ok, there are some different ways to do what u are trying to do.. one is with CSS:

You can specify style="margin:0px auto" -> this wil make an automatic margin to equal propotion of both sides of the element, using up all the space in the "container", either its a div, or the document itself. i know this works with divs, havent really tried with images alone...

If u wanna set CSS values with javascript (lets try the margin shall we), then do this:

var image = document.getElementById('idoftheimage');

image.style.margin = "0px auto";

etc...

if u wanna position the image itself in the middle of its container, u can do the following.. This example requires that the image is placed in the middle of the entire document, both horizontal and vertical:

var width = (document.documentElement.innerWidth?document.documentElement.innerWidth:document.body.clientWidth);

var height = (document.documentElement.innerHeight?document.documentElement.innerHeight:document.body.clientHeight);

var image = document.getElementById('idoftheimage');

image.style.position = "absolute";

image.style.left = (width / 2) - (image.offsetWidth / 2) + "px";

image.style.top = (height / 2) - (image.offsetHeight / 2) + "px";

of corse this last JS sample is not really good because it has to use absolute positioning, but just to show u the idea...

Style properties is passed in javascript as "[object].style.[styleproperty] -> you should read on the w3c pages to see what javascript names the different style properties has...
Copy linkTweet thisAlerts:
@Howard_KaikowauthorJul 04.2009 — Thanx to those posting ideas in this thread:

1, I was able to solve the problem.

2. I realized that my Javascript books are not adequate for my puposes.

First the code I'm using in the document is now:

[CODE]<div class=center>
<script type="text/javascript">
document.write('<p><img src="' + GetURL('http://www.standards.com/ThisAndThat/ReadFile.jpg') + '"></p>');
</script>

<noscript>
<p><IMG alt="ReadFile" src="http://www.standards.com/ThisAndThat/ReadFile.jpg"></p>
</noscript>
</div>
[/CODE]

I'd like to have something that executes faster.

I have 4 Javascript related books, listed below.

None have an entry for getElementById in the index.

Is it time that I update any of the following?

[LIST=1]
  • [*]Javascript The Definitive Guide, 3rd Edition, by David Flanagan (June 1998 printing).


  • [*]Pure Javascript by R. Allen Wyke, Jason D. Gilliam, and Charlton Ting (August 1999 printing)


  • [*]Javasript Application Cookbook by Jerry Bradenbaugh (October 1999 printing)


  • [*]HTML & XHTML The Definitive Guide, 4th Edition, by Chuck Musciano and Bill Kennedy (August 2000 printing)

    • [/LIST]

    Heck, none of the books are even from the 21st century?

    Time for replacements?

    Suggestions, about books, that is?
    Copy linkTweet thisAlerts:
    @ReisJul 04.2009 — Read about DOM (Document Object Module) ?
    ×

    Success!

    Help @Howard_Kaikow spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...