how to center javascript innerHtml

Question

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> 

Answer 1

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

Should be enough.

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

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

Answer 2

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> 

Answer 3

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

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

Answer 4

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