title: how to center javascript innerHtml
body: <p>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.</p>
  
  <p>example A </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var settingsHtml = '';
      settingsHtml += "&lt;center&gt;&lt;h3 style=\"color: rgba(255, 255, 255);\"&gt;settings&lt;/h3&gt;&lt;br&gt;";
      settingsHtml += "&lt;button&gt;TEXT HERE&lt;/button&gt;&amp;nbsp;";
      settingsHtml += "&lt;button&gt;TEXT HERE&lt;/button&gt;&lt;br&gt;";
      settingsHtml += "&lt;br&gt;&lt;hr style=\"color: rgba(255, 255, 255);\"&gt;&lt;br&gt;";
      settingsHtml += "text here&lt;br&gt;";
      settingsHtml += "text here&lt;br&gt;";
      settingsHtml += "text here&lt;br&gt;";
      settingsHtml += "&lt;br&gt;&lt;hr style=\"color: rgba(255, 255, 255);\"&gt;&lt;br&gt;";
      settingsHtml += "More Coming Soon!&lt;/center&gt;&lt;br&gt;";
  
      document.getElementsByClassName("hud-settings-grid")[0].innerHTML = settingsHtml;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hud-settings-grid"&gt; &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>or example B</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var settingsHtml = '';
      settingsHtml += "&lt;center&gt;&lt;h3 style=\"color: rgba(255, 255, 255);\"&gt;settings&lt;/h3&gt;&lt;/center&gt;&lt;br&gt;";
      settingsHtml += "&lt;center&gt;&lt;button&gt;TEXT HERE&lt;/button&gt;&amp;nbsp;";
      settingsHtml += "&lt;button&gt;TEXT HERE&lt;/button&gt;&lt;/center&gt;&lt;br&gt;&lt;br&gt;";
      settingsHtml += "&lt;center&gt;&lt;hr style=\"color: rgba(255, 255, 255);\"&gt;&lt;/center&gt;&lt;br&gt;";
      settingsHtml += "&lt;center&gt;text here&lt;/center&gt;&lt;br&gt;";
      settingsHtml += "&lt;center&gt;text here&lt;/center&gt;&lt;br&gt;";
      settingsHtml += "&lt;center&gt;text here&lt;/center&gt;&lt;br&gt;&lt;br&gt;";
      settingsHtml += "&lt;center&gt;&lt;hr style=\"color: rgba(255, 255, 255);\"&gt;&lt;/center&gt;&lt;br&gt;";
      settingsHtml += "&lt;center&gt;More Coming Soon!&lt;/center&gt;&lt;br&gt;";
  
      document.getElementsByClassName("hud-settings-grid")[0].innerHTML = settingsHtml;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hud-settings-grid"&gt; &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>