I have trouble align text using innerHTML

a= document.createElement('a');
a.style.cssText= 'font-size: 20px; cursor: pointer; text-align:center;';
a.innerHTML = 'Align ME TO CENTER!';

Default align to left, and it stuck that way... Any suggestion?

I have trouble align text using innerHTML

a= document.createElement('a');
a.style.cssText= 'font-size: 20px; cursor: pointer; text-align:center;';
a.innerHTML = 'Align ME TO CENTER!';

Default align to left, and it stuck that way... Any suggestion?

• javascript
• html
• css

Share Improve this question Follow edited Mar 27, 2015 at 0:13 Unheilig 16.3k193193 gold badges7070 silver badges101101 bronze badges asked Mar 26, 2015 at 20:14 user4713659user4713659 2511 gold badge11 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

First of all, there is a bug in your code:

where you have

var a = document.createElement('a');
a.style.cssText= 'font-size: 20px; cursor: pointer; text-align:center;';
a.innerHTML = 'Align ME TO CENTER!';

You should have:

var a = document.createElement('a');
a.setAttribute('style','font-size: 20px; cursor: pointer; text-align:center;');
a.innerHTML = 'Align ME TO CENTER!';

And to fix your problem, in the style, you need to set the display property to block, like so:

a.setAttribute('style', 'font-size: 20px; cursor: pointer; text-align: center; display:block;');