如何居中javascript innerHtml

Question

好吧，首先，大家好，我是今天才剛剛開始的新手，我正在編寫腳本，需要添加一些內部html，想知道我是否需要將每一行或居中的開始都居中而不是結尾？ 我什至做對了嗎？ 如果您認為我可以做的更好，請告訴我不能用jquery。

例子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> 

或例子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

用<center> .... </center>包裝所有內容

應該足夠了。

但是， center是一個過時的 HTML標記。 您應該使用：

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

Answer 2

更好的方法是通過將整個<div>的text-align css屬性設置為'center'來更改元素樣式，因為<centre>標簽已過時 。

 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

在div中使用html5的默認中心標簽，以便獲得解決方案。

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

Answer 4

答案是=不需要放到每個元素上。 只需將代碼放在html標記內，或將css與div元素一起使用。 例如你的

CSS代碼=>

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