innerHTML alignment question

Question

Hi - I have some js code that brings in random images and text (captions). The captions are centered under the images and would like them left aligned -- can anyone tell me how I might edit the

 span.innerHTML =Shuffled[i].text;

to make the text left aligned under the image? Thanks in advance if you can answer it!

{

    var td = document.getElementById("title"+i);

    var link  = td.getElementsByTagName("a")[0]; 

    var image = link.getElementsByTagName("img")[0];
    var span  = link.getElementsByTagName("span")[0];


    image.src = ibase + Shuffled[i].image;


    link.href = urlbase + Shuffled[i].href;

    span.innerHTML =Shuffled[i].text;

    image.alt = Shuffled[i].text;
}

Answer 1

There's nothing in your JavaScript that is centering your text. It looks like an existing stylesheet rule might be doing this. If you can edit the CSS, I'd recommend that approach first. If not, you could try adding this:

span.style.textAlign = "left";

I'm assuming span contains the text you're trying to align left.

Answer 2

You could try this:

span.style.display = "block";
span.style.textAlign = "left";

You could post the HTML along with the script if this doesn't work, though.

Answer 3

A span is default aligned left. Another CSS style or tag is centering your span. Maybe a tag or you're centering the td of the table or the span has "display: block; text-align: center;" in CSS. I would recommend to find out what the problem is before doing anything else. Because you could mess up your layout. After identifying the source of the problem and span has a css style of "display: block;" add

span.style.textAlign = "left"

else if the rest of the layout is correct you could try

span.style.display = "block"; span.style.textAlign = "left";

or change the center of the upper tag and align the image to center.

Answer 4

Thanks all! I got it -- it was in the css as suggested -- I probably would've figured that out at some point but let myself get intimidated by the .js. :)

Thanks so much for your SPEEDY help, also!

Answer 5

First find which style or class is working using firefox Firebug . You can change style in firebug itself. Then add it to javascript