CODEWITHSUNDEEP
javascripthtml
HoodRat
HoodRat

Reputation: 21

how to center javascript innerHtml

ok first off hi i am totally new to this just started today and i was working on a script and need to add some inner html and was wondering do i need to center every line or center start than the end? and am i even doing it right ? and if you think i could do it a better way please let me know can not be jquery.

example A 

    var settingsHtml = '';
    settingsHtml += "<center><h3 style=\"color: rgba(255, 255, 255);\">settings</h3><br>";
    settingsHtml += "<button>TEXT HERE</button>&nbsp;";
    settingsHtml += "<button>TEXT HERE</button><br>";
    settingsHtml += "<br><hr style=\"color: rgba(255, 255, 255);\"><br>";
    settingsHtml += "text here<br>";
    settingsHtml += "text here<br>";
    settingsHtml += "text here<br>";
    settingsHtml += "<br><hr style=\"color: rgba(255, 255, 255);\"><br>";
    settingsHtml += "More Coming Soon!</center><br>";

    document.getElementsByClassName("hud-settings-grid")[0].innerHTML = settingsHtml;
<div class="hud-settings-grid"> </div>

or example B

var settingsHtml = '';
    settingsHtml += "<center><h3 style=\"color: rgba(255, 255, 255);\">settings</h3></center><br>";
    settingsHtml += "<center><button>TEXT HERE</button>&nbsp;";
    settingsHtml += "<button>TEXT HERE</button></center><br><br>";
    settingsHtml += "<center><hr style=\"color: rgba(255, 255, 255);\"></center><br>";
    settingsHtml += "<center>text here</center><br>";
    settingsHtml += "<center>text here</center><br>";
    settingsHtml += "<center>text here</center><br><br>";
    settingsHtml += "<center><hr style=\"color: rgba(255, 255, 255);\"></center><br>";
    settingsHtml += "<center>More Coming Soon!</center><br>";

    document.getElementsByClassName("hud-settings-grid")[0].innerHTML = settingsHtml;
<div class="hud-settings-grid"> </div>

Upvotes: 2

Views: 6529

Answers (4)

Ng Atom
Ng Atom

Reputation: 95

The answer is = not need put to every element. Just put your code inner html tag or use css with your div element. For example your

css code => 

.hud-settings-grid{
   align-text: center;
    or your css code .....
}

Upvotes: 0

Yousaf
Yousaf

Reputation: 165

Use deafult center tag of html5 in your div so you will get your solution.

<div style="text-align: center;">
</div>

Upvotes: 1

Joe Iddon
Joe Iddon

Reputation: 20434

A better method would be to change the elements style by setting the text-align css property of the whole <div> to 'center', since the <centre> tag is obsolete.

var settingsHtml = '';
    settingsHtml += "<h3 style=\"color: rgba(255, 255, 255);\">settings</h3><br>";
    settingsHtml += "<button>TEXT HERE</button>&nbsp;";
    settingsHtml += "<button>TEXT HERE</button><br>";
    settingsHtml += "<br><hr style=\"color: rgba(255, 255, 255);\"><br>";
    settingsHtml += "text here<br>";
    settingsHtml += "text here<br>";
    settingsHtml += "text here<br>";
    settingsHtml += "<br><hr style=\"color: rgba(255, 255, 255);\"><br>";
    settingsHtml += "More Coming Soon!<br>";

    let div = document.getElementsByClassName("hud-settings-grid")[0]
    div.innerHTML = settingsHtml;
    div.style.textAlign = 'center';
<div class="hud-settings-grid"> </div>

Upvotes: 1

Liron Zluf
Liron Zluf

Reputation: 31

Wrapping everything with <center> .... </center>

Should be enough.

BUT, center is an obsolete HTML tag. You should use:

<div style="text-align:center"> .... </div>

Upvotes: 3

Related Questions