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>

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>

• javascript
• html

• <center> is obsolete: help.simplytestable./errors/html-validation/… – Peter B Commented Sep 2, 2018 at 10:14

4 Answers 4

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

Should be enough.

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

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

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>

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

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

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 .....
}