如何居中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 .....
}